How to disable css rules on mobile devices
<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>