Как отключить правила CSS на мобильных устройствах

Question

я создал класс в WordPress CSS файл

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

я использую его в постах, чтобы обернуть текст вокруг изображения так:

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

Это работает на ПК и мобильных устройствах. Тем не менее, я хочу, чтобы отключил этот поплавок в мобильных устройствах. Так что я сделал это:

Существует уже @media определен в шаблоне, я просто добавил .leftfloat {float: none;}

Но когда я проверить это, это не отключив поплавок на мобильных устройствах.

@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;} 

Answer 1

Ваш полный CSS выглядит следующим образом:

.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; 
    } 

Как он стоит, мобильный получает float: left от исходного класса, так как запросы средств массовой информации являются все max-width. Чтобы установить float: none на «мобильные» размеры, вам необходимо полностью изменить все (например)

.leftfloat { 
    float: none; 
} 

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