100% width Css issue only on mobile safari

Question

Here is the site in question: www.prestigedesigns.com

The problem is that my header and footer won't stretch to their assigned 100% but only on iPhone/iPad.

I've tried what I think is everything and I could really use some help? Is there anyone else that has a similar issue?

Thanks.

Answer 1

It's kind of a viewport issue with mobile Safari, but you can get the same effect by shrinking the width of your desktop browser window and scrolling right, you'll see your background starts dropping out.

This is because when you're setting width:100% to your #top and #header divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, (or viewport). You're not telling them to resize to the content within.

Mobile Safari's default viewport width is 980px , so it uses 980px as the width of the containing element for your divs. This is why your layout, which is around 1050px, is getting its background chopped off.

You can fix this for mobile Safari by directly setting its viewport (read Apple's Docs ), or by adding min-width: width of your design in pixels ; to your body . Mobile Safari will use the min-width 's value for setting its viewport, and it'll also keep it from happening in desktop browsers as well.

Answer 2

Set the viewport to adapt your page on any device.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Answer 3

Set min-width:(Width of your design)px; in CSS file and this issue will be solved.

Answer 4

it's not assigned width: 100% the header is getting width: 1009px; same thing with the footer.

Answer 5

Just a hunch as I can't actually test it, but the foot element you have within footbar is set to an absolute width in pixels while the footbar is set to % - the same with your header element - try switching these to % too?