Grow your CSS skills. Land your dream job.

Bringing the x scroll bar back with media query

  • # July 15, 2011 at 3:46 pm

    This has to be simple, but I’m just not getting it.

    Here’s the deal: I’m building my portfolio site and wanted an infinite width kind of thing, where the backgrounds of the various element extended as wide as the screen gets.

    I found a good answer on this site, of course, and it involves simply setting a huge negative horizontal margin value and the exact same huge but positive padding value on the elements, and then setting overflow-x: invisible

    Kinda like this:


    body {
    overflow-x: hidden;
    }
    header{
    background: #ffa200 url(../img/header-bg.png) repeat-x;
    margin: 0 -3000px;
    padding: 0 3000px;
    height: 166px;

    }

    Example here: http://thefstopdesign.com
    The problem is, I want the scroll bar to come back of the window is sized below the layout width of 960px, so things don’t just disappear off the screen.

    The extent of my media query attempt went like this, and does not seem to work:

    @media screen and (max-width: 960px) {
    body {
    overflow-x: scroll;
    }
    }
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

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