Wraps not working on mobile browsers

[gtdesign]

Hey guys, I’ve been searching around for ways to fix this issue I’m having, but not having any luck. If you visit http://goo.gl/S0zbhx on either an android or iphone, 50% of the container wraps are cut off. It seems like it would be a simple fix, but I’ve been at it for hours and not coming up with anything. Would one of you css experts be so kind as to have a look at the site on your mobile, and on your browser, so you can see what it’s suppose to look like. It would be very much appreciated. Thank you.

[kwerty]

checkout the widths of #main, #hero and so on… you will find that all those div have a width 978px. That’s the reason you are seeing scrollbar on the page.

[timbarden]

You may want to think about adding some media queries to your CSS, which will allow you adjust the site depending on the size of the device http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

[gvinson]

What is going on is you haven’t set a max-width for your wrappers and you have set the width’s to a fixed width (ie: px instead of em’s or %).

What I would suggest is setting your wrappers and to max-width: 100%. This will keep the wrapper contained within the window.

Next, you may want to adjust the left positioning of #step2 and #step3 divs. They are positioned outside of the wrapper when the window is resized to a smaller width.

I would definitely recommend using media queries. To me, they are the main tool behind RWD.

[Author]

Posts