How to display 3 items per row on products/category pages for 2 column Magento 2?
asked Nov 28, 2016 at 11:07
-
Hi @SagarDobariya were you able to solve your issue?– ShaileshCommented Jan 17, 2020 at 5:16
Add a comment
|
2 Answers
Create or modify style in _listings.less in Magento_Catalog\web\css\source\module path
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
.products-grid {
.product-item {
width: 100%/5;
}
}
}
to
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
.page-products.page-layout-2columns-left,
.page-products.page-layout-2columns-right {
.products-grid .product-item {
width: 100%/3;
}
}
}
answered Nov 28, 2016 at 11:13
-
i try but this is not working for 2 column left i have also try .page-products.page-layout-1column { .products-grid { .product-item { width: 100%/3; } } } Commented Nov 28, 2016 at 11:21
-
Try this
.page-products.page-layout-2columns-left .products-grid { .product-item { width: 100%/3; } }Commented Nov 28, 2016 at 11:27 -
-
What if I only want this in search results? Could anyone please help me with this.– SivaCommented Apr 8, 2019 at 11:24
-
Above code will work on default Magento setup as well, But if you have change layout from 2columns to 1column or 3columns in this case you have to add this selector
.page-products.page-layout-1columnor.page-products.page-layout-3columnsrespected. Commented Apr 8, 2019 at 12:49
I solved it by copying the file
vendor/magento/theme-frontend-luma/module-catalog/web/css/source/module/_listings.less
to my theme at THEME/Magento_Theme/web/css/source/module/_listing.less and adding my code under the media-width mixin:
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
...
//
// Change Products per row from 5 to 3 in custom page layout
// ---------------------------------------------------------
.page-products.page-layout-2columns-left {
.products-grid {
.product-item {
margin-left: 2%;
padding: 5px;
width: calc(~'(100% - 6%)/3');
}
}
}
