100% width does not work on iOS

Question

For some reason on iphone, my footer does not stretch across the screen, although it css is set to width: 100%. You can see an example of my footer problem here: http://pixelcakecreative.com/tla2/

My css for the footer is as follows:

#footer{ width:100%; margin-top:100px; position:relative; clear:left; background:#4c4c4c; float:left; padding:30px 0;} 

This issue ONLY applies to iOS devices, as the layout works great on PC browsers. Any idea how to fix this? I tried everything I could think of. Thanks!

Answer 1

Try making it easier to view metadata (at least for iOS) in the following line:

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

Fewer attributes than they usually tell you, I know, but it worked for my mobile projects.

Now, upon closer inspection, most if your site is under the "center" and then you have a wrapper and footer.

The code used for the wrapper and footer is different. Wrapper has a fixed width:941px; while the footer has width:100% . Most elements inside the wrapper have a width:100% , but this only works because the shell has a width: 941px .

So, you are either trying to add the same width and padding to the footer {width:941px; padding:30px 34px;} {width:941px; padding:30px 34px;} , or something along these lines OR

You drop the footer inside a similar wrapper with fixed padding, padding, etc., and then let the footer hold width:100%;

Answer 2

your div#innerFooter prevents the div#innerFooter from scaling correctly, adjusts the width to 100%, and this should fix it

 #innerFooter {width:100%} 

Answer 3

You are probably missing the mobile viewing meta tag <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This is necessary so that mobile devices, such as iOS, correctly scale the page in the viewport. You can read about it here or here .

Answer 4

Try to leave an empty start scale and maximum scale empty and use user scrollable = no. The first two make the same mistake in our project with a responsive design. I still do not understand why.