title: How to set @media (min-width) and (max-width) for both chrome and firefox
body: <p>I want to set some CSS rules for tablet devices, to do so i tried so set these rules for screen between 769px and 991px. When i do :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media (min-width: 769px) and (max-width: 991px) {
      .img-circle {
          width: 50%;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>It work with chrome but firefox don't and when i tried adding brackets :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media ((min-width: 769px) and (max-width: 991px)) {
      .img-circle {
          width: 50%;
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>It work with forefox but no more with chrome !
  If you have an idea :) i can't figure it out</p>
  
  <p>Regards</p>