Changing background color based on browser size in CSS
<p>I can't figure out what is wrong with this code. The background color doesn't change at all, it just stays white the entire time.</p>

<pre><code>&lt;style type="text/css"&gt;
      h1 {
        position: absolute;
        text-align: center;
        width: 100%;
        font-size: 6em;
        font-family: Roboto;
        transition: all 0.5s;
      }

      @media screen and (min-width: 0px) and (max-width: 400px) {
        background-color: red;
      }
      @media screen and (min-width: 401px) and (max-width: 599px) {
        background-color: green;
      }
      @media screen and (min-width: 600px) {
        background-color: blue;
      }
    &lt;/style&gt;
</code></pre>