Search code examples
htmlcssmedia-queriescontainer-queries

media query breakpoint ignores html min-width

So when I resize the browser window to less than 480px, my site changes back to the original style (the css not defined inside the mixins). I figured I'd work around this by just limiting the html with min-width, but although the browser gets a horizontal scrollbar, the css still changes. Why is that and how do I work around it?

html {
  min-width: 500px;
}

/********************************
HEADER
********************************/
.header img, .header h1 {
  float: left;
}
.header h1 {
  font-family: 'Lato', sans-serif;
  font-weight: 900;
}
@media only screen and (min-width: 480px) {
  .header h1 {
    font-size: 2em;
  }
}
@media only screen and (min-width: 768px) {
  .header h1 {
    font-size: 3em;
  }
}
@media only screen and (min-width: 992px) {
  .header h1 {
    font-size: 4em;
  }
}
@media only screen and (min-width: 1200px) {
  .header h1 {
    font-size: 5em;
  }
}

html for reference:

<!doctype html>
<html>
    <head>

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>ZIC Knjižnica</title>

        <link href='http://fonts.googleapis.com/css?family=Lato:400,700,900&subset=latin-ext,latin' rel='stylesheet' type='text/css'>

        <link rel="stylesheet" href="styles/style.css">

    </head>

    <body>
        <div class="header">
            <img src="img/ijs_logo.gif">
            <h1>ZNANSTVENO INFORMACIJSKI CENTER</h1>
        </div>
    </body>

</html>
Solution

  • Setting minimum or maximum dimensions on the root element does not restrict the dimensions of the viewport for the purposes of the width and height media features.

    As you have observed, the browser creates a horizontal scrollbar once you resize the viewport to be narrower than 480px. The root element remains 480px wide because of its own min-width declaration, but the viewport is too narrow to contain it and that is why the scrollbar appears. Which means that the viewport is narrower than 480px and thus no longer matches the (min-width: 480px) expression.

    You can't restrict the viewport dimensions in a desktop browser. If you want the styles in (min-width: 480px) to apply even when the browser window is smaller than 480px, remove the @media conditional entirely:

    .header h1 {
  font-family: 'Lato', sans-serif;
  font-size: 2em;
  font-weight: 900;
}
@media only screen and (min-width: 768px) {
...