title: How to disable css rules on mobile devices
body: <p>I created a class in a wordpress css file</p>
  
  <pre><code>.leftfloat{ float:left; padding-right:10px; }
  </code></pre>
  
  <p>I use it in the posts to wrap text around images like so:</p>
  
  <pre><code>&lt;div class ="leftfloat" &gt; image code or ad code &lt;/leftfloat&gt;
  </code></pre>
  
  <p>It's working on PC and mobile devices.  However, I want to <strong>disable this float in mobile devices</strong>. So I did this:</p>
  
  <p>There is already <code>@media</code> defined in the template, I just added <code>.leftfloat {float: none;}</code></p>
  
  <p>But when I check it, it's not disabling float on mobile devices.</p>
  
  <pre><code>@media screen and (max-width: 860px) {
          .leftfloat {float: none;}
  }
  @media screen and (max-width: 1020px) {
          .leftfloat {float: none;} }
  
  @media screen and (max-width: 767px) {
          .leftfloat {float: none;}
  }
  @media screen and (max-width: 620px) {
          .leftfloat {float: none;} }
  
  @media screen and (max-width: 420px) {
           .leftfloat {float: none;}
  </code></pre>