CMS OpenCart 3.0 дорабатываем преимущества магазина (оба варианта)

Всем привет, сегодня в комментариях меня попросили доработать мобильную версию преимуществ нашего интернет магазина на CMS OpenCart 3.0 — сделать их компактнее и по 2 преимущества в ряд, раз просите — делаю.

Список задач на сегодня:

1. Дорабатываем преимущества нашего интернет магазина (1 вариант)
2. Дорабатываем преимущества нашего интернет магазина (2 вариант)

Приступим:

1. Открываем админку нашего интернет магазина и переходим: Модули / Расширения > Модули / Расширения > Преимущества > Редактировать > Code View и меняем эти строки (2, 8, 14, 20):

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">

на эти:

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">

(P.S. — просто меняем col-xs-12 на col-xs-6)

Нажимаем кнопку Code View и кнопку Сохранить.

Первый вариант преимуществ доработан, переходим ко второму варианту.

2. Открываем админку и переходим: Модули / Расширения > Модули / Расширения > Преимущества (2 вариант) > Редактировать > Code View и меняем эти строки (2, 8, 14, 20):

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-12">

на эти:

<div class="product-layout col-lg-3 col-md-3 col-sm-6 col-xs-6">

вместо этих строк (4-5):

<div class="image col-sm-4"><img src="image/catalog/chat.png" class="img-responsive"></div>
<div class="caption col-sm-8"><h4>Грамотные консультанты</h4></div>

вставим эти:

<div class="image col-sm-4 col-xs-4"><img src="image/catalog/chat.png" class="img-responsive"></div>
<div class="caption col-sm-8 col-xs-8"><h4>Грамотные консультанты</h4></div>

(P.S. — Мы просто дописываем col-xs-4 (после col-sm-4) в первую строку и col-xs-8 (после col-sm-8) во вторую).

Аналогично правим 10-11, 16-17 и 22-23 строки.

Нажимаем кнопку Code View и кнопку Сохранить.

Результат неплохой, но на некоторых телефонах из за длинного текста преимуществ может появиться полоса прокрутки, поэтому рекомендую переделать отображение преимуществ на мобильных устройствах немного иначе, вместо этих строк (4-5):

<div class="image col-sm-4 col-xs-4"><img src="image/catalog/chat.png" class="img-responsive"></div>
<div class="caption col-sm-8 col-xs-8"><h4>Грамотные консультанты</h4></div>

вставляем эти:

<div class="image col-sm-4 col-xs-12"><img src="image/catalog/chat.png" class="img-responsive"></div>
<div class="caption col-sm-8 col-xs-12"><h4>Грамотные консультанты</h4></div>

(P.S. — вместо col-xs-4 (первая строка) и col-xs-8 (вторая строка) вписываем col-xs-12).

Аналогично правим 10-11, 16-17 и 22-23 строки.

Нажимаем кнопку Code View и кнопку Сохранить.

Преимущества получаются не такими компактными, но зато без всяких полос прокруток и т.д.

На сегодня всё, вступайте в нашу группу в ВК, предлагайте новые идеи для статей и следите за нашими новостями.

Живой пример (обновляется одновременно с выходом новых статей): https://about-all.ru