The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Full Width Background Color

  • # April 27, 2013 at 10:40 pm

    I have a full width grey background in the middle of my website. I created two columns for text and an image but now I cant get the the background to stretch down along with the text. Can someone take a look and see if I have my Divs in the wrong order or what.
    Thanks for taking a look

    # April 27, 2013 at 10:44 pm

    you need to contain the child floats. add overflow: hidden; to .fullWidthSectionBG

    # April 27, 2013 at 10:52 pm

    Ah perfect! thanks you!

    # April 28, 2013 at 1:38 am

    So I have one last minor fix. I am looking to insert some spacing between the map and the text, which it looks like I have room for. But when I do this and view the website on my Iphone it shows that it doesn’t have any room and the image is push away from the text.

    # April 28, 2013 at 5:11 am

    This reply has been reported for inappropriate content.

    Have to look at breakpoints in media queries I guess . This kind of setup with ‘max-width media’ queries and ‘layout engine’ dependencies only gets more complicated over time, I find. In the end it’s feels so much better and simpler to go with ‘min-width media queries’ : the ‘mobile first approach’ . Build from scratch on you’re own terms.

    # April 28, 2013 at 1:29 pm

    Hmm I tried playing with the media queries and was not able to fix the problem. Can anyone else see why my text is getting push below the image of the map on their mobile (Iphone) devices.

    # April 28, 2013 at 5:24 pm

    [SOLVED] Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed