Grow your CSS skills. Land your dream job.

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
    http://www.jobspark.ca

    # 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.
    http://www.jobspark.ca

    # April 28, 2013 at 5:11 am

    [Have to look at breakpoints in media queries I guess](http://answers.squarespace.com/questions/260/whats-the-best-way-to-account-for-layoutengine-in-our-responsive-template-designs “layoutengine in responsive template designs “) . 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.
    http://www.jobspark.ca

    # 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.

*May or may not contain any actual "CSS" or "Tricks".