отображение товара в каталоге, мобильная версия (по 2шт) и пк (по 3 шт)

[113212]

Подскажите, пожалуйста.
Как сделать, чтобы на пк в категория отображалось 3 товара, а в мобильной версии по 2.
Сейчас стоит 3, и в мобильной версии показывает по 3 товара. с разрывами. есть на фото

Змінено 22 вересня 2019 користувачем 113212

[krluch]

Та тут работы на часа 4 и достаточно трудоемко. Лучше обратитесь к специалистам, а то наломаете дров... https://opencartforum.com/forum/18-настройка-и-мелкая-работа-по-уже-существующему-сайту/

[Blast]

17 минут назад, 113212 сказал:

Подскажите, пожалуйста.
Как сделать, чтобы на пк в категория отображалось 3 товара, а в мобильной версии по 2.
Сейчас стоит 3, и в мобильной версии показывает по 3 товара. с разрывами. есть на фото

 

<div class="product-layout product-grid col-md-4 col-xs-6">

или

<div class="product-layout product-grid col-sm-4 col-xs-6">

в зависимости от того, начиная с какой ширины экрана начинать показывать мобильную верстку

[113212]

13 часов назад, Blast сказал:

<div class="product-layout product-grid col-md-4 col-xs-6">

или

<div class="product-layout product-grid col-sm-4 col-xs-6">

в зависимости от того, начиная с какой ширины экрана начинать показывать мобильную верстку

а где это искать?
и что дальше с этим сделать?

[113212]

14 часов назад, krluch сказал:

Та тут работы на часа 4 и достаточно трудоемко. Лучше обратитесь к специалистам, а то наломаете дров... https://opencartforum.com/forum/18-настройка-и-мелкая-работа-по-уже-существующему-сайту/

Самому интересно)

[113212]

15 часов назад, Blast сказал:

<div class="product-layout product-grid col-md-4 col-xs-6">

или

<div class="product-layout product-grid col-sm-4 col-xs-6">

в зависимости от того, начиная с какой ширины экрана начинать показывать мобильную верстку

Прописал в categorу.tpl, ничего не поменялось
 

<div class="product-layout product-grid col-sm-4 col-xs-6">

Змінено 23 вересня 2019 користувачем 113212

[Blast]

13 минут назад, 113212 сказал:

Прописал в categorу.tpl, ничего не поменялось
 

<div class="product-layout product-grid col-sm-4 col-xs-6">

модификаторы и кэш шаблона обновили?

[krluch]

4 часа назад, 113212 сказал:

Самому интересно)

Открываете гугль и гуглите "css это" И "адаптивная верстка bootstrap". Если не разберетесь - надо 100% искать специалиста, но если разберетесь - запомните этот способ на все случаи жизни и используйте во всех ситуациях (запросы можно менять), чтобы не отвлекать бесплатно по детским вопросам очень занятых специалистов 

[113212]

1

Змінено 23 вересня 2019 користувачем 113212

[113212]

10 часов назад, Blast сказал:

модификаторы и кэш шаблона обновили?

да обновлял

[113212]

7 часов назад, krluch сказал:

Открываете гугль и гуглите "css это" И "адаптивная верстка bootstrap". Если не разберетесь - надо 100% искать специалиста, но если разберетесь - запомните этот способ на все случаи жизни и используйте во всех ситуациях (запросы можно менять), чтобы не отвлекать бесплатно по детским вопросам очень занятых специалистов 

что такое css понятно, и сетка bootstrap, от того что я поменял размер сетки ничего не изменилось, сам товара сжался по ширине, но отображается также как и раньше

[Blast]

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

что такое css понятно, и сетка bootstrap, от того что я поменял размер сетки ничего не изменилось, сам товара сжался по ширине, но отображается также как и раньше

решение я вам написал верное. Если не сработало, то тут несколько вариантов:

1. Прописали не в том файле. Например, блок Рекомендуемых товаров использует свой шаблон, а не category.twig

2. Прописали не тому html-элементу

3. Не обновили модификаторы

4. Не обновили кэш шаблона

5. Есть какие-то перекрывающие стили вашего шаблона

[113212]

2 часа назад, Blast сказал:

решение я вам написал верное. Если не сработало, то тут несколько вариантов:

1. Прописали не в том файле. Например, блок Рекомендуемых товаров использует свой шаблон, а не category.twig

2. Прописали не тому html-элементу

3. Не обновили модификаторы

4. Не обновили кэш шаблона

5. Есть какие-то перекрывающие стили вашего шаблона

 

[Blast]

1 час назад, 113212 сказал:

 

попробуйте clear: both; заменить на clear:left;

ну или дайте хотя бы ссылку на сайт. А то это больше похоже на гадание

[113212]

11 минут назад, Blast сказал:

попробуйте clear: both; заменить на clear:left;

ну или дайте хотя бы ссылку на сайт. А то это больше похоже на гадание

попробовал поменять, ничего не произошло
horis.by

[Bn174uk]

У Вас и не получиться это сделать, так как у Вас по 3 товара в ряд http://prntscr.com/pa854v

Как минимум нужно от .row избавляться 

[Blast]

14 минут назад, 113212 сказал:

попробовал поменять, ничего не произошло
horis.by 

у вас всегда в <div class="row"> закидывается по 3 товара. Поэтому так и получается

удалить row из шаблона,  в css заменить

.responsive .product-grid .row > div.col-xs-6:nth-child(odd) {
	clear: both;
}

на

.responsive .product-grid > div.col-xs-6:nth-child(odd) {
	clear: left;
}

 

и дописать

@media (min-width: 768px) {
	.responsive .product-grid > div.col-sm-4:nth-child(3n+1) {
		clear: left;
	}	
}

 

[113212]

1

Змінено 30 вересня 2019 користувачем 113212

[113212]

В 24.09.2019 в 13:13, Blast сказал:

у вас всегда в <div class="row"> закидывается по 3 товара. Поэтому так и получается

удалить row из шаблона,  в css заменить

.responsive .product-grid .row > div.col-xs-6:nth-child(odd) {
	clear: both;
}

на

.responsive .product-grid > div.col-xs-6:nth-child(odd) {
	clear: left;
}

 

и дописать

@media (min-width: 768px) {
	.responsive .product-grid > div.col-sm-4:nth-child(3n+1) {
		clear: left;
	}	
}

 

Спасибо, помогло, работает.

[marmariska]

В 22.09.2019 в 22:56, Blast сказал:

<div class="product-layout product-grid col-md-4 col-xs-6">

В каком файле это находится? В category вместо этого стоит <div class="product-layout product-list col-xs-12">, изменение xs-12 на xs-6 результата не дает. 

Вообще странно, потому что при просмотре кода на сайте он полностью указан как у вас тут написано, а в файле категорий вот в такой версии. Где же искать product-grid ???

[Blast]

22 часа назад, marmariska сказал:

В каком файле это находится? В category вместо этого стоит <div class="product-layout product-list col-xs-12">, изменение xs-12 на xs-6 результата не дает. 

Вообще странно, потому что при просмотре кода на сайте он полностью указан как у вас тут написано, а в файле категорий вот в такой версии. Где же искать product-grid ???

catalog/view/javascript/common.js

там по слову grid найдете

и не забудьте обновить кэш модификаторов

[marmariska]

Спасибо, @Blast !