Background-color/image not covering the width of the div on mobile devices

Question

(On mobiles devices only: android, ios)

I am not quite sure what is going on here, but I do know that the background-color at the top isn't spanning the entire div length. Also the background-images near the footer isn't centering to the middle. I have tried many different things to remedy the problem but it looks like the top background-color issue and the footer background-image issue are related because they both have similar 'cut off' points.

Both elements share similar code. A parent div that is absolutely positioned with a centered inner div. Any insight would be great.

Website is here .

Update : I tried to replicate the issue on jsFiddle here (reminded: use a mobile browser): http://jsfiddle.net/zmwgg279/2/

Answer 1

Your issue is that you are specifying conflicting width s for your wrapper elements.

Here's the Fiddle

Your first element, #seascape-infobar has a width of 100% , which is perfect for a responsive layout. Where it breaks is that you are forcing a child element to be potentially wider than the screen on which it displays. Here's a simplified version of your code:

HTML

<div id="seascape-infobar">
    <div class="wrap"></div>
</div>

CSS

#seascape-infobar {
    width: 100%;
}
#seascape-infobar .wrap {
    margin: 0 auto;
    width: 980px; /* What happens when this is wider than the screen? Break! */
}

When you view this on a mobile, which has a screen width lower than 980px , the parent wrapper #seascape-infobar will still fit the screen width correctly, but the child element .wrap will be forced to overflow to 980px .

The safest practice here is to ensure all your widths are being specified using relative units like % or ems . This allows content to adjust cleanly to the display on which it is viewed.