cancel
Showing results for 
Search instead for 
Did you mean: 

Luma Theme - how to change number of product columns

Luma Theme - how to change number of product columns

Hello,

I have the Luma theme installed on Magento 2.4, and I am trying to figure out how to change the number of product columns on each row on the Category page. See this page:

http://petfriendlyairbnb.com/luma-women/tops-women/jackets-women.html

 

It displays 4 products on each row now.

 

What changes do I need to make to make it display only 3 products on each row?

 

Is that a configuration setting in Magento? Or is it changes to my theme?

 

Thank you!

1 REPLY 1

Re: Luma Theme - how to change number of product columns

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

you can go through this link https://magento.stackexchange.com/questions/147800/magento-2-display-3-items-per-row-in-products-category-pages