treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] No 100% width with Modernize?

  • Hi, 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: http://cigar2.se

    And here I'm using a custom build: http://cigar2.se/skytteguiden.html

    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

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

    gl

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

    Magnus

  • nice that I could help! :)