Оптимизировать модуль для мобильных устройств

Покажу одно простое решение, для сайта где шаблон был оптимизирован под мобильные устройства, а новый (установленный модуль) – обычный, без оптимизации.

Установил модуль новостей, в частности - модуль 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.

В результате горизонтальный ряд изображений,  при просмотре в мобильном устройстве, был преобразован в вертикальную колонку по одному изображению.

Данное решение можно применить для других модулей, в которых имеется горизонтальные ряды изображений. Соответственно подкорректировать для своих нужд.