1

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.

2 Answers 2

1

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.

0
0

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');
            }
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.