title: Media Queries are not working with Google Developer Tools
body: <p>I have been struggling for ages trying to figure out what is going on. I have been trying to use media queries on a project but they just aren't working as expected when using google developer tools, I want to use the Toggle device toolbar to resize browsers and style but my media queries don't seem to be working with google developer tools?</p>
  
  <p>Am I right in thinking that max-width works for all widths less than or equal to a number and min-width is all widths greater than or equal to a number?</p>
  
  <p>This is my below code. It is pretty simple. I pretty much just want it to be pink below 425px. </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>body {
    margin: 0;
  }
  
  #outer {
    display: table;
    height: 100vh;
    width: 100%;
  }
  
  #inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }
  
  @media (max-width: 425px) {
    #outer {
      background: pink;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="outer"&gt;
    &lt;div id="inner"&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>