Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 958
george Avatar asked Jul 14 '11 15:07

george


People also ask

How do I change the width to 100% in CSS?

It seems like this should be one of the easiest things to understand in CSS. If you want a block-level element to fill any remaining space inside of its parent, then it's simple — just add width: 100% in your CSS declaration for that element, and your problem is solved.

Can we give width more than 100% in CSS?

Yes, as per the CSS 2.1 Specification, all non-negative values are valid for width, that includes percentage values above 100%.

What does width 100% means in CSS?

if you specify width:100%, the element's total width will be 100% of its containing block plus any horizontal margin, padding and border.

How do I get CSS to work in Safari?

Displaying properties in Safari There is a CSS appearance property used to display an element using a platform-native styling based on the users' operating system's theme. To make it work on Safari, we must set the appearance property to its "none" value. Also, use -WebKit- and -Moz- vendor prefixes.


2 Answers

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.

like image 106
Walter Cameron Avatar answered Oct 15 '22 06:10

Walter Cameron


Set the viewport to adapt your page on any device.

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
like image 27
helpyou Avatar answered Oct 15 '22 07:10

helpyou