Modify number of products per row

Hi Amanda,

The number of products per row depends on the width of your page. If you could send us the link to your page to have a look, we could probably provide you custom CSS to display 4 number of products in a row.

Best regards,

Hi) could you and help me in this matter?
I also have 2 product lines in the catalog … I would like 4 products. What should I do ?

Thanks for your response.

Previously, 4 products would appear per row (if allowed by screen width). However, for some reason the max is now 3 per/row.

Here’s the link you can look at: https://bareshoereview.com/brand-template/
Login: Etoile

Also, this is a new catalog, and for some reason, it’s not recognizing the CSS to make all rows the same height. Can you please take a look at this?
prod-cat-inner .prod-cat.thumb-display {
display: flex;
flex-wrap: wrap;}

Thank you!!

Hi @amandarmnd,

Here’s some CSS you can try adding to your Catalogue’s Custom CSS box (you’ll want to replace the prod-cat-inner .prod-cat.thumb-display {…} style that’s currently there):

.prod-cat-inner > .prod-cat {
    width: 90%;
    margin: 0 5%;}

.prod-cat-inner .prod-cat.thumb-display .prod-cat-category.upcp-thumb-category {
    display: flex;
    flex-wrap: wrap;}

.upcp-thumb-item {
    margin: 0 11px 22px 11px;}

Hi @sement ,

Can you send us a link to your catalogue page?

@etoilewebdesign Thanks!

That worked as far as fixing making the rows the same heights. However, it’s still only showing 3 items/row.

Thank you for all your help!

Hi @amandarmnd ,

We just saw an error in the CSS we sent, this should fix it (you’ll need to replace the earlier code we posted with the code below):

.prod-cat-inner {
    width: 90%;
    margin: 0 5%;}

.prod-cat-inner .prod-cat.thumb-display .prod-cat-category.upcp-thumb-category {
    display: flex;
    flex-wrap: wrap;}

.upcp-thumb-item {
    margin: 0 11px 22px 11px;}

Sorry for the confusion.

Cool! That did the trick. Thank you so much!!! Have a great rest of your day.

You too ?? !