Как добавить пользовательский css отзывчивый в тему WPA Avada?

Question

У меня есть сайт с avada wprdpress theme. Я добавил пользовательский css в «Пользовательский CSS» из параметров темы. Это прекрасно работает для настольных компьютеров, но не работает для мобильных решений.

Пример:

/* Portrait and Landscape */ 
@media only screen and (min-device-width: 320px) and (max-device-width: 640px){ 
    .fusion-alignleft{ 
     max-width: 80%; 
     float:left; 
    } 
    .fusion-alignright{ 
     max-width: 20%; 
     float:right; 
    } 
    .fusion-contact-info { 
     padding: 1em 0px; 
     line-height: 1.5em; 
    } 
    .fusion-body .fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright{ 
     text-align: right; 
    } 
} 

Как добавить адаптивные стили в Авада WordPress вариантов темы?

Answer 1

В среде CSS есть разница между шириной и шириной ширины устройства. Вы можете прочитать больше об этом здесь: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml

Тем не менее, попробуйте это ...

@media all and (min-width: 320px) and (max-width: 640px) { 
.fusion-alignleft { 
    max-width: 80%; 
    float:left; 
} 
.fusion-alignright { 
    max-width: 20%; 
    float:right; 
} 
.fusion-contact-info { 
    padding: 1em 0px; 
    line-height: 1.5em; 
} 
.fusion-body .fusion-mobile-menu-design-modern .fusion-secondary-header .fusion-alignright { 
    text-align: right; 
    } 
}