Resizeable my webpage for different resolutions and mobile devices

Question

In my website, I have following issue:

Resizing elements and content on different resolutions and especially on mobile devices. This is the website

I'm testing it on iPad and on a 14" laptop. I work on the laptop and of course everything looks fine to me, but when I try to enter thru the iPad everything is completely messy (well not that messy but doesn't look good). The iPad is the first generation.

If anyone can help on this matter I would appreciate it very much.

If you want me to present some kind of code from the website itself, just ask, I'll post anything needed to resolve this.

Answer 1

Try using CSS3 media queries, Here are two useful links which might get you started.

1. https://www.dropbox.com/s/9244et7g0hi5fwl/The%20Book%20of%20CSS3%20-%20A%20Developer%27s%20Guide%20to%20the%20Future%20of%20Web%20Design%20-%20by%20Peter%20Gasston.pdf?dl=0
2. http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

The first link is a CSS3 book which I have shared via dropbox, The second link will take you to a website where the fella has tried to explain the steps in details.

Another option you can use is bootstrap framework which is an exclusive frame work for web developers especially for helping you out with CSS, javascript contents.