title: Only one media query working
body: <p>totally new to media queries and responsive design and I've fallen at the first hurdle.</p>
  
  <p>I have the following:</p>
  
  <pre><code>@media only screen and (max-width: 100px) {
      #wrap {
              background: #F00;
      }   
  }
  
  @media only screen and (max-width: 500px) {
      #wrap {
              background: #224466;
      }           
  }
  </code></pre>
  
  <p>And only the max-width: 500px works in that as I reduce the screen down it changes to the first colour, but as I reduce it further down to below 100px nothing else happens.</p>
  
  <p>Where have I failed?</p>
  
  <p>thanks</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>For anyone else with the same issue, here is the answer as provided by Sean Vieira. </p>
  
  <p>The cascade still applies to active media queries so swapping them around resolves the issue) I also increased it from 100px as suggested by Roy Stanfield as the desktop browser might not go that small.</p>
  
  <pre><code>@media only screen and (max-width: 800px) {
      #wrap {
              background: #224466;
      }     
      .entry-title {
          font-size: 2em; 
      }
  }
  
  @media only screen and (max-width: 400px) {
      #wrap {
              background: #F00;
      }   
      .entry-title {
          font-size: 1em; 
      }
  }
  </code></pre>