CODEWITHSUNDEEP
htmlcssmobilemobile-safari
george
george

Reputation: 301

100% width Css issue only on mobile safari

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.

Upvotes: 29

Views: 86614

Answers (5)

Shalmal Sheth
Shalmal Sheth

Reputation: 41

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

Upvotes: 2

helpyou
helpyou

Reputation: 371

Set the viewport to adapt your page on any device.

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

Upvotes: 37

Walter Cameron
Walter Cameron

Reputation: 2383

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.

Upvotes: 71

allanmayberry88
allanmayberry88

Reputation: 113

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?

Upvotes: 0

David Nguyen
David Nguyen

Reputation: 8528

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

Upvotes: 0

Related Questions