Два ряда товаров в мобильной версии

[OlegSliva]

Подскажите пож. как сделать отображение товаров в 2 ряда на моб. версии, на экране шире 350 px отображается 2, где поправить чтоб и на маленьком было так же. Сайт https://shopt.shop/. Спасибо.

[SiteMix]

Судя по всему, это задаётся в скрипте карусели. Лучше уточнить у разработчика шаблона @pikitos

[kirillchacha]

Здравствуйте. А подскажите пожалуйста, как сделать отображение товаров в 2 ряда на моб. версии? Сайт: https://znachkibroshki.net.ua/All_Products . В некоторых форумах писали: Необходимо отредактировать файл JS по пути:
/catalog/view/javascript/common.js

 

  if (cols == 2) {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-6 col-md-6 col-sm-4 col-xs-4');
        } else if (cols == 1) {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
        } else {
            $('#content .product-list').attr('class', 'product-layout product-grid col-lg-3 col-md-3 col-sm-6 col-xs-6');
        }

Но почему то ничего не изменилось? Кэш страницы обновлял. если зайти в devtools то и там нету изменений.

[Prooksius]

Найдите у себя вот этот файл:
https://znachkibroshki.net.ua/catalog/view/javascript/priceview.js

 

И в нем найдите подобные строки и замените

[magdek]

15 минут назад, kirillchacha сказал:

 сделать отображение товаров в 2 ряда на моб. версии

можно попробовать через css как-то так например

 

@media screen and (max-width: 400px) {
.col-xs-12 {
    width: 50%;
}
}

 

[kirillchacha]

В 18.01.2022 в 19:14, Prooksius сказал:

Найдите у себя вот этот файл:
https://znachkibroshki.net.ua/catalog/view/javascript/priceview.js

 

И в нем найдите подобные строки и замените

Пробовал, точно так же без результат.

 

В 18.01.2022 в 20:07, Pascha сказал:

0. смысла вообще не вижу лезть в скрипты.... не в этом случае точно...
1. не изменилось, потому что у вас верстка таблицей ( еще и без адаптива)...потому и дает смещение на маленьких разрешениях
2. посмотрите тут  как сверстана таблица под адвптив...тем самым поймете что 2 столбца в подобных случаях и не требуется

а теперь по теме
 

 

ну это ни в каие ворота, потому как Вы такими стилями переломаете весь сайт.... потому как  .col-xs-12 применяется ко всякому на сайте и при адаптиве будет полная .опа....
мой вариант
делаем 2 столбца товаров в момент когда они выстраиваются в один ряд...это при разрешении экрана 767px
 

@media (max-width: 767px) {
.product-layout {
	width: 50%
}
}

добавляем для возврата к 1 столбцу на мизерных разрешениях, к примеру при разрешении 375px  ( иначе разглядывать под лупой чего там у вас в магазине)
 

@media (max-width: 375px) {
.product-layout {
	width: 100%
}
}

стиль универсален и применится как к product-list, так и к product-grid

по аналогии можно все прописать и в модулях для вывода товаров ( если там нет product-layout, если есть, то автоматом применится и к ним)
Ну или просто добавить класс product-layout или писать то же самое, что выше,  но для уникального класса блока продукта 

Спасибо. Посмотрю этот вариант. может действительно будет лучше в css коде полазить.

[Prooksius]

9 минут назад, kirillchacha сказал:

Пробовал, точно так же без результат.

CTRL-F5

[kirillchacha]

1 минуту назад, Prooksius сказал:

CTRL-F5

нажимал, и через devtools: очищал кэш и делал жесткую перезагрузку страницы. там оно такое ощущение будь-то вообще не затрагивает эти 2 скрипта, хоть вообще весь код очистить.

 

 А этот файл от модуля: прайс лист - он добавляет 3 иконки переключения

https://znachkibroshki.net.ua/catalog/view/javascript/priceview.js

[yegorulya]

Добрый день!
Вставляла этот код:

@media (max-width: 767px) {
.product-layout {
	width: 50%
}
}

и этот 

 

@media (max-width: 375px) {
.product-layout {
	width: 100%
}
}

в мобильной версии 2 столбика появляются, но товар скачет на странице, стоит на одну букву написать и все...
Я подстроила на своем мобильном, посокращала названия, столо красиво и сообразила проверить на другом телефоне - так вот там все скачет, когда на моем уже красиво стало. Что делать? как быть????
Помогите пожалуйста.

[yegorulya]

как это сделать?
я с опенкарт познакомилась недавно и гуманитар по образованию. Умею только повтрять шаги, которые смотрю по видео или читаю на форуме.
Не подскажите, пожайлуста, куда зайти и что нажать подробно?

Змінено 25 січня 2022 користувачем yegorulya

[yegorulya]

Спасибо за ответ!

вот ссылка https://pled-pokryvalo.com.ua/

 

Товары добавляю пока в категорию " Пледы" - там можно с мобильного посмотреть 

Змінено 25 січня 2022 користувачем yegorulya

[Prooksius]

ох уж этот 3-й бутстрап...
Как-то так.

.product-thumb h4 {
  height: 45px;
  overflow: hidden;
}
@media (max-width: 560px) {
  .product-thumb h4 {
    height: 55px;
  }
}

 

или вообще вот так на всех разрешениях:

.product-thumb h4 {
  height: 53px;
  overflow: hidden;
}
.product-thumb .caption > h4 + p {
  height: 100px;
}

 

[yegorulya]

заменить эти 2 строчки, что я встравила ранее, на те 2 что вы прислали из последних?

.product-thumb h4 {
  height: 53px;
  overflow: hidden;
}
.product-thumb .caption > h4 + p {
  height: 100px;
}

[Prooksius]

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

[yegorulya]

Смотрите, вставила ваши строчки эти:

.product-thumb h4 {
  height: 53px;
  overflow: hidden;
}
.product-thumb .caption > h4 + p {
  height: 100px;
}

Действительно, вроде перестало выбивать товары, смотрятся ровно в один ряд, проверяла пока на одном телефоне.
Но вот меню поползло.
Было раньше в один ряд, теперь стало в два ряда и неравномерно.
Как вернуть старый вид меню?
фото прилагаю

[Prooksius]

а это последствия вот этого вашего действия:

 

[Prooksius]

Не мучайтесь, заплатите кому-нибудь денюжку небольшую и вам спецы все как вам надо сделают.
А еще лучше - купите/поставьте бесплатный шаблон нормальный, а не этот легкий перепил дефолта. Так будет гораздо красивее.

[yegorulya]

а как это можно откорректировать?
чтобы и там и там было хорошо?

[yegorulya]

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

[Prooksius]

4 минуты назад, yegorulya сказал:

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

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

Тем более в вашем случае это простые вещи.

[yegorulya]

спасибо всем за ответы!
хорошего вечера!

[kirillchacha]

В 18.01.2022 в 20:07, Pascha сказал:

0. смысла вообще не вижу лезть в скрипты.... не в этом случае точно...
1. не изменилось, потому что у вас верстка таблицей ( еще и без адаптива)...потому и дает смещение на маленьких разрешениях
2. посмотрите тут  как сверстана таблица под адвптив...тем самым поймете что 2 столбца в подобных случаях и не требуется

а теперь по теме
 

 

ну это ни в каие ворота, потому как Вы такими стилями переломаете весь сайт.... потому как  .col-xs-12 применяется ко всякому на сайте и при адаптиве будет полная .опа....
мой вариант
делаем 2 столбца товаров в момент когда они выстраиваются в один ряд...это при разрешении экрана 767px
 

@media (max-width: 767px) {
.product-layout {
	width: 50%
}
}

добавляем для возврата к 1 столбцу на мизерных разрешениях, к примеру при разрешении 375px  ( иначе разглядывать под лупой чего там у вас в магазине)
 

@media (max-width: 375px) {
.product-layout {
	width: 100%
}
}

стиль универсален и применится как к product-list, так и к product-grid

по аналогии можно все прописать и в модулях для вывода товаров ( если там нет product-layout, если есть, то автоматом применится и к ним)
Ну или просто добавить класс product-layout или писать то же самое, что выше,  но для уникального класса блока продукта 

Спасибо вам большое! Разобрался, и немного усовершенствовал код: 

@media (max-width: 768px) {
    .freeloadind .product-layout,
    .product-grid {
        width:50%;
    }