title: max-width is not working for mobile
body: <p>I'm trying to make a responsive layout using <code>@media</code>. I'm testing it out via chrome dev tools, and the mobile screen size isn't working <strong>only</strong> when testing for mobile on chrome, by clicking <kbd>f12</kbd> (to open dev tools in chrome) then hit <kbd>ctr</kbd> + <kbd>Shift</kbd> + <kbd> M </kbd>.</p>
  
  <p>When you resize, <code>@media (max-width: 480px)</code> never gets toggled. What am I doing wrong, and how can I fix it?</p>
  
  <p><a href="http://codepen.io/anon/pen/oBxLga" rel="nofollow noreferrer"><h3>Codepen</h3></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Width is less than x*/
  
  @media (max-width: 480px) {
    body {
      background-color: blue;
    }
  }
  /* Width is greater than x*/
  
  @media (min-width: 480px) {
    body {
      background-color: green;
    }
  }
  /* Width is greater than x*/
  
  @media (min-width: 1024px) {
    body {
      background-color: orange;
    }
  }</code></pre>
  </div>
  </div>
  </p>