Question

For some reason on the iphone, my footer doesn’t stretch across the screen, even though it’s css is set to width: 100%. You can view an example of my footer issue 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 problem ONLY applies to iOS devices, as the layout works fine on PC browsers. Any idea how to fix this? I have tried everything I can think of. Thanks!

Answer 1

Try by simplifying your meta name viewport (at least for iOS) to the following line:

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

Less attributes than you are normally told to have, I know, but it has worked for my mobile projects.

Now, upon closer inspection, the majority if your site is under ‘center’, and then you have wrapper and footer.

The code used for the wrapper and the footer is different. Wrapper has a fixed width:941px; whereas footer just has width:100%. The majority of the elements inside wrapper have width:100% but that only works because wrapper has width: 941px.

So, you either try adding that same width and padding to footer {width:941px; padding:30px 34px;} or something along those lines OR

You throw footer inside a similar wrapper with a fixed with, padding, etc and then let let footer keep width:100%;