Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Opencart 2, как сделать корректный вывод сеткой?


Recommended Posts

Проблема: кривой вывод продуктов сеткой при изменении размера окна браузера (width)

CMS: opencart.cms 2.1.0.1.10

Шаблон: default

 

Видел на просторах интернета решение данной проблемы не однократно, но сейчас меня гугл забанил и не хочет мне показывать именно то что я ищу! :(

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

image.png.5d6c88c0ccb19c764ae214b780d10832.png

 

Подскажите корректные стили для этого всего.

Спасибо и да будет вам + в карму. :)

Надіслати
Поділитися на інших сайтах


Задать высоту содержимого( без изображения) карточки товара в стилях (sylesheet.css)

Например

.product-grid .product-thumb .caption {

    height: 250px;/*тут подбираете число п овкусу*/

}

или

использовать скрипт выравнивания высоты блоков

Надіслати
Поділитися на інших сайтах


Вообще в стандартном шаблоне опенкарта это решается таким способом http://prntscr.com/gtl765

Возможно вы изменяли классы. в этом случае нужно col-lg-2, col-lg-6, col-md-2 ... и т.д на свои заменить

@media (min-width: 1200px) {
   #content .col-lg-2:nth-child(6n+1),
   #content .col-lg-2:nth-child(6n+1),
   #content .col-lg-3:nth-child(4n+1),
   #content .col-lg-4:nth-child(3n+1),
   #content .col-lg-6:nth-child(2n+1) {
      clear:left;
   }
}
@media (min-width: 992px) and (max-width: 1199px) {
   #content .col-md-2:nth-child(6n+1),
   #content .col-md-2:nth-child(6n+1),
   #content .col-md-3:nth-child(4n+1),
   #content .col-md-4:nth-child(3n+1),
   #content .col-md-6:nth-child(2n+1) {
      clear:left;
   }
}
@media (min-width: 768px) and (max-width: 991px) {
   #content .col-sm-2:nth-child(6n+1),
   #content .col-sm-2:nth-child(6n+1),
   #content .col-sm-3:nth-child(4n+1),
   #content .col-sm-4:nth-child(3n+1),
   #content .col-sm-6:nth-child(2n+1) {
      clear:left;
   }
}

 

ну или можно минимальную высоту задать

Надіслати
Поділитися на інших сайтах


@Grodas , спасибо, по умолчанию так не ровнял...

Еще до первого ответа так и сделал... в контроллере ограничение длинны наименования товара урезал, создал класы для наименования и описания и задал им высоту... пока работает ОК :\

Попробую еще внедрить вариант стиля что вы предоставили. Спасибо в общем :)

 

Надіслати
Поділитися на інших сайтах


Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
  • Зараз на сторінці   0 користувачів

    • Ні користувачів, які переглядиють цю сторінку
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.