Question

I’m editing our News site’s mobile CSS file. On the iPhone 3gs, 4 & simulator there are some pages (not all) there is an extra right margin.

Here’s an example of a page WITH the extra margin:

http://bit.ly/mMA2q7

..and here’s an example of a page without it:

http://bit.ly/iQeOGY

Both pages are using the same template. I’m guessing the images are adding the extra margin.

Here is our mobile CSS file http://bit.ly/iW5JVm and viewport:

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

I tried applying different min-width values to the body but haven’t found a solution.

Do you know how to get rid of this extra margin on the iPhone?

Answer 1

your photobanner div is too wide. It gets set to 500px which is way too much 🙂

try to add width:auto!important to it 🙂