iPad background for div blocks not spanning entire width of screen

Question

I've had a continued problem with div blocks stretching along the entire width of my iPad's screen. It seems to stop about 20 pixels from the right side of the screen.

Screenshots:

For the menu, I've got a div block and a UL inside for the menu itself. UL's width is set to 1000px and the background div block is set to width:100%; Width of this background is exactly 1009px.

The footer is a div block with the background, and two floated div blocks. Width of the background for this is exactly 1004px.

I've had this problem on other websites, specifically in this area. Anyone have any idea?

Answer 1

You're seeing the problem on the iPad because its default viewport is 980 pixels (see Apple's docs ). So the effect you're seeing is the same as if you shrink your desktop browser to less than 1000 pixels, and scroll to the right (it does the same thing).

You'll notice the size of the gap changes depending on the width of the browser window. This is because when you're setting width:100% to your wrapper divs, you're telling them to resize to the width of the containing element, which in this case is the browser window, or the iPad's viewport. You're not telling them to resize to the content within.

@sandeep's solution is the correct one, and how you've implemented it works fine for me in Safari but not in any browser other I try it in. Are you user agent sniffing to serve the code to only Safari? If so, there's no need, you can just apply the min-width:1024px, or even just min-width:1000px to your body tag, or .footerbg however you normally apply CSS.

Answer 2

I had a look at your website, the problem is not only on the iPad but also on the PC version because when the horizontal scroller is on PC then the page behaves the same as it does on iPad version. Check yourself.

Solution: Just write the following in your body:

body{  min-width:1024px; }