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

[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%;
    }