title: Changing background color based on browser size in CSS
body: <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>