How to disable css rules on mobile devices

1 Views

I created a class in a wordpress css file 

.leftfloat{ float:left; padding-right:10px; }

I use it in the posts to wrap text around images like so:

Read More
<div class ="leftfloat" > image code or ad code </leftfloat>

It’s working on PC and mobile devices. However, I want to disable this float in mobile devices. So I did this:

There is already @media defined in the template, I just added .leftfloat {float: none;}

But when I check it, it’s not disabling float on mobile devices. 

@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;}
Post Views: 1

Related posts

2 comments

  1. Your complete CSS looks like:

    .leftfloat{
  float:left;
  padding-right:10px;
}
   @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;
   }

    As it stands, mobile gets the float: left from your original class because the media queries are all max-width. To set float: none at “mobile” sizes you need to reverse everything, (eg)

    .leftfloat {
  float: none;
}

@media screen and (min-width: 420px) {
    .leftfloat {
      float: left;
    }
}

  2. You can set the property of the child in mobile to be inherit.
    like this:

     @media screen and (max-width: 420px) {
       .leftfloat {
         float: inherit;
       }

Comments are closed.