title: Why isn't media query on max-width working?
body: <p>I want to control the size of my logo using media query.</p>
  
  <p>The original <code>width</code> of my logo is <code>210px</code>.</p>
  
  <p>I want it to be <code>166px</code> when the screen <code>width</code> is greater than <code>56.865em</code> and same when it is less than this <code>width</code>, i.e., for mobile site.</p>
  
  <p>I have written following code for this:</p>
  
  <pre class="lang-css prettyprint-override"><code>@media only screen and (min-width: 56.875em){
    .site-branding img{
      max-width: 166px;
    }
  }
  
  @media only screen and (max-width: 56.875em){
    .site-branding img {
      max-width: 166px !important;
    }
  }
  </code></pre>
  
  <p>Only the first code block is working. Why isn't second working? (When the screen width is decreased, the <code>width</code> of logo becomes <code>210px</code> again).</p>
  
  <p>Is there any rule that you can't use both <code>min</code> and <code>max</code> media-queries to control same element?</p>