Question

I have a site I am developing which my client has alerted me to a a problem with – it does not display correctly on iPad / iPhone. Chrome / FF / Safari (on PC) all appear correctly.

The site is http://xprotect.co.nz

There is a black strip down the right hand side, which is the background colour of the body tag. It also shows at the bottom.

I have managed to get Firebug lite working on the iPad (as the problem does NOT show in Safari with Developer tools – using iPad as the screen agent). I can see the basis of the problem – but not where it stems from.

Firebug on the iPad is telling me that the calculated value of two container divs (outerContainer and middleContentOuter) is 980 pixels, whereas the centered divs in each of these have widths of 1000px. So I am actually losing 20px on the right hand side – something is causing those container divs to reduce by 20 pixels, even though the specified width for each is 100%.

Can anyone spot something that I can’t – or offer any advice?

Many thanks,

Toby.

Answer 1

You need to set min-width in your css:

 .outerContainer, middleContentOuter{
      min-width: 1000px;
 }