CODEWITHSUNDEEP
androidhtmlcssmobile
chasethesunnn
chasethesunnn

Reputation: 2224

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

(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/

Upvotes: 0

Views: 458

Answers (1)

Timmah
Timmah

Reputation: 1335

Your issue is that you are specifying conflicting widths 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.

Upvotes: 2

Related Questions