title: Default CSS being overridden by media query when screen size is less than MQ
body: <p>I can't figure out what I'm doing wrong and it's probably something stupid. But I have a logo that I'm trying to resize based on the screen size. But for some reason, the default (mobile) style isn't taking effect and instead is using the media query style for the next size (tablet-vertical). Despite the screen size being less than the tablet size.</p>
  
  <p>I'm using Google Chrome's inspector for breakpoints.</p>
  
  <p>Here's what I have:</p>
  
  <pre><code>h1.logo {font-size: 2em;}
  
  @media only screen and (min-width: 768px) {
    h1.logo {font-size: 1.25em;}
  }
  
  @media only screen and (min-width: 1130px) {
    h1.logo {font-size: 1.2em;}
  }
  
  </code></pre>
  
  <p>For some reason the 1.25em size is overruling the 2em size when it should be the other way around. Even when my screen width is less than 768px.</p>