Custom CSS For Product Collections On Mobile To Have 3 or 4 Products Per Row

[nadiamejilla]

Hello! I'm working on a website and desperately need help changing the number of products displayed per row on mobile view. The website is using a theme called Trademark. 

The desktop view is set to display 4 products per row, but the theme doesn't give me an option to change it for mobile. Mobile is currently displaying 1 product per row - I want to change it to display at least 3 products per row on mobile.

Can anyone provide me with custom CSS code to do this?

Here's the preview link for the website: https://nhz2o3te4rd3v2dj-10828686.shopifypreview.com

[makkaomakka · Accepted solution]

Hi @nadiamejilla ,

Three item per row is too much on the mobile device. I suggest you to atmost 2 products per row.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
@media only screen and (max-width: 1000px) {
  .list-products .grid__cell {
        width: 33.3%!important;
    }
    .list-products .grid__cell img {
        height: auto!important;
    }
}
@media only screen and (max-width: 600px) {
  .list-products .grid__cell {
        width: 50%!important;
    }
    .list-products .grid__cell img {
        height: auto!important;
    }
}

</style>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[makkaomakka · Accepted solution]

Hi @nadiamejilla ,

Three item per row is too much on the mobile device. I suggest you to atmost 2 products per row.

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code just above </body> tag

<style>
@media only screen and (max-width: 1000px) {
  .list-products .grid__cell {
        width: 33.3%!important;
    }
    .list-products .grid__cell img {
        height: auto!important;
    }
}
@media only screen and (max-width: 600px) {
  .list-products .grid__cell {
        width: 50%!important;
    }
    .list-products .grid__cell img {
        height: auto!important;
    }
}

</style>

If you require further help to optimize your store, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

[nadiamejilla]

Thank you so much - it worked! I now need help tailoring the appearance of the product cards & images in mobile view.

How can I edit the code to achieve the following:

• Make product cards are all the same size
• Make all the product images within the cards the same size? (Some images are larger than others - please see attached screenshots)

     

Here's the preview link: https://uq2f4cdfe1q0i4c9-10828686.shopifypreview.com

Thank you!!

[Natasha-Saed]

Hi,

Add the following code:

@media only screen and (min-width: 768px) {

.list-products .grid__cell img {max-height: 200px !important;}
.product-item__info {min-height: 200px !important; max-height: 200px !important;}

}

[nadiamejilla]

I added the code to theme.liquid, but it didn't change anything

 

[Natasha-Saed · Accepted solution]

Sorry max-width not min-width

@media only screen and (max-width: 768px) {

.list-products .grid__cell img {max-height: 200px !important;}
.product-item__info {min-height: 200px !important; max-height: 200px !important;}

}

[nadiamejilla]

It worked, thank you!!

FYI I had to change the min-height and max-height to 250px to fit the text in the cards properly. 

[Natasha-Saed]

Glad I could help, yes sure you can always play around with the pixels to get your desired height in accordance to your text length.

Have a nice day.