Мобильная версия и подкатегории

[olgakondr]

Здравствуйте. Попробовала добавить картинки в подкатегориях, без модуля. Хорошо вроде получилось, но в мобильной версии, как-то смотрится не очень. В одну колонку. Подскажите как в стилях их сделать выравниванием по левому краю. Они ведь могут там встать хотя бы в 2 колонки. https://kupilegko.su/katalog-tovarov  

 

[wbDev]

Вам нужно верстку править в том блоке

Например заменить

col-sm-2

в блоке subcats на

col-lg-2 col-md-3 col-sm-4 col-xs-4

 

[olgakondr]

Ясно, спасибо. Буду пробовать. 

[SiteMix]

8 часов назад, olgakondr сказал:

Хорошо вроде получилось, но в мобильной версии, как-то смотрится не очень. В одну колонку.

Как упоминалось выше, не задана ширина блоков для разрешения до 768рх. Но предложенный способ не совсем хорош для мобильной версии,

поскольку задаёт одну ширину для всего диапазона до 768рх.

В данном случае лучше разбить этот диапазон на несколько и задать нужную ширину для различных этих диапазонов.

Например, так:

@media (min-width: 560px) and (max-width: 767px) {.subcats li {width: 20%;}}

@media (max-width: 559px) {.subcats li {width: 33.33%;}}

 

Кроме того, на экранах меньше 768рх у класса col- нет обтекания (float) поэтому нужно будет добавить:

.subcats li {float: left;}

 

Всё это нужно добавить в конец файла: catalog/view/theme/next_default/stylesheet/stylesheet.css