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

No 100% width with Modernize?

  • # February 3, 2013 at 3:18 am

    If I use the Modernizr full version (modernizr-2.6.2.min.js) the header and navbar will not fill the full width – but when using a custom built Modernizr the 100% width works.

    With the full version it looks like header and navbar using the “max-width: 1140px” in the rule “.main” ??

    I have scratch my head many times now about this, but can’t solve it – so any suggestion is welcome.

    The header and navbar should be 100% width, and using this scss:

    header {
    @include changeform;
    background-color: darken($header, 10);
    background-image: url(/img/wild_oliva.png);
    text-align: center;
    padding: 0.5em 0 0.5em 1em;
    @include breakpoint(small) {
    text-align: left;

    .wrapper {
    margin: 0 auto;

    .main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 1em 0 1em;
    @include breakpoint(large) {
    padding: 1.5em;
    margin: 0 auto;

    On this page I’m using the full version of Modernizr: []( “no full width”)

    And here I’m using a custom build: []( “yes, full width”)

    What it is in Modernizr that limit the width on .wrapper to the same as in .main rule? With the custom build the design breaks in IE8 :(

    Regards, Magnus

    # February 3, 2013 at 5:17 am

    Hey I dont know if this is the right solution, but it works as far as i can see.

    put on all the elements from header up to html (so only parents, and the parents from the parents up to html itself), a width:100%; then it will work.


    # February 3, 2013 at 7:46 am

    Thanks strages,
    setting width to 100% on the html element, seems to solve the issue. Strange, but working… ;)


    # February 3, 2013 at 10:23 am

    nice that I could help! :)

Viewing 4 posts - 1 through 4 (of 4 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