Why isn't media query on max-width working?
<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>