Оптимизировать модуль для мобильных устройств
Покажу одно простое решение, для сайта где шаблон был оптимизирован под мобильные устройства, а новый (установленный модуль) – обычный, без оптимизации.
Установил модуль новостей, в частности - модуль YJ Module Engine, который не оптимизирован для мобильных устройств.
Нужно было горизонтальный ряд из 4х картинок, который отображался в браузере компьютера со стандартными размерами - переделать в вертикальную колонку для мобильного отображения.
То есть стояла задача "Каким методом можно подключить данный модуль к настройкам CSS ?"
Решение было таким:
@media only screen and (max-width: 768px) {
.yjme_item {
width: 100%;
float: none;
margin: 0 auto 20px auto;
}
Вставил этот медиа – запрос «CSS @media» в файл CSS модуля YJ Module Engine.
В результате горизонтальный ряд изображений, при просмотре в мобильном устройстве, был преобразован в вертикальную колонку по одному изображению.
Данное решение можно применить для других модулей, в которых имеется горизонтальные ряды изображений. Соответственно подкорректировать для своих нужд.