Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

CMS: opencart.cms 2.1.0.1.10

Шаблон: default

 

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

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

image.png.5d6c88c0ccb19c764ae214b780d10832.png

 

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

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

Link to post
Share on other sites

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

Например

.product-grid .product-thumb .caption {

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

}

или

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

Link to post
Share on other sites

Вообще в стандартном шаблоне опенкарта это решается таким способом 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;
   }
}

 

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

Link to post
Share on other sites

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

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

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

 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.