Magento 2 - Change amount of products per row in category view
Question
Currently there are showing 4 products per row in the category view.
How can I make it show 3 products per row instead?
I found this answer. It says there is a file Magento_Catalog\web\css\source\module\_listing.less
but I searched in vendor\magento\module-catalog\view\frontend\web
folder and there is not even a css folder inside of it.
Solution
The answer you linked to is correct, but you're looking in the wrong place.
You need to look in the theme folder, for example, if you are using Luma:
vendor/magento/theme-frontend-luma/module-catalog/web/css/source/module/_listings.less
You should really be creating/editing this file in your local theme.
OTHER TIPS
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 4 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');
}
}
}
Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange