Can the number of products per row be limited to 3 for collections (Minimal theme)?

Solved
earthtoplanet
Excursionist
31 5 3

I'm using my Shopify site to both sell prints of my cartoons but also as means for people to browse and view the cartoons.

https://earthtoplanet.com/collections/cartoons 

Currently, the number of products (i.e., cartoons) per a row is dictated by the screen width. Is there an easy code tweak I can make to set the max number of products in the row to three? (I know it's possible with Featured Collections, but I'm specifically looking to do this on a Collections page). 

Really appreciate the help!

Accepted Solution (1)

Accepted Solutions
suyash1
Shopify Partner
3730 409 611

This is an accepted solution.

@earthtoplanet- add !important after clear:none, so all code becomes

@media screen and (min-width:750px){
.grid-uniform .grid__item{width: 33.33%; clear:none !important;}

.grid-link__title {text-align: center;}
.grid-link__meta {text-align: center;}

}

 you can replace old code with this

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30

View solution in original post

Replies 9 (9)
suyash1
Shopify Partner
3730 409 611

@earthtoplanet- please add this css to the very end of your timber.css file and check, it is for tablet/desktop view only

@media screen and (min-width:750px){
.grid-uniform .grid__item{width: 33.33%; clear:none;}

.grid-link__title {text-align: center;}
.grid-link__meta {text-align: center;}

}

 

suyash1_0-1636519307909.png

 

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
earthtoplanet
Excursionist
31 5 3

@suyash1 Thank you! That almost solved the problem though it introduced a new spacing problem where the lines alternate between:

3 products

2 products

3 products

2 products

I zoomed out for a screenshot (https://earthtoplanet.com/collections/cartoons 

earthtoplanet_0-1636520126402.png

I leave it as is to see if you're able to help me troubleshoot further. I appreciate your time!

 

suyash1
Shopify Partner
3730 409 611

This is an accepted solution.

@earthtoplanet- add !important after clear:none, so all code becomes

@media screen and (min-width:750px){
.grid-uniform .grid__item{width: 33.33%; clear:none !important;}

.grid-link__title {text-align: center;}
.grid-link__meta {text-align: center;}

}

 you can replace old code with this

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30

View solution in original post

earthtoplanet
Excursionist
31 5 3
suyash1
Shopify Partner
3730 409 611

@earthtoplanet- welcome, if you need any update then you can contact me on email given below.

You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
earthtoplanet
Excursionist
31 5 3

Hi @suyash1, I'm planning on switching my site's theme to Dawn. Would you be willing to share with me the relevant code update for Dawn to limit the number of products shown per row to three?

Really appreciate your help!

suyash1
Shopify Partner
3730 409 611
sure, I will share the code, you can contact me on email too for quick
communication, you have my email below.
You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30
earthtoplanet
Excursionist
31 5 3

Thanks for the quick response! I actually just found the answer elsewhere:

Step 1: Go to Online store > Themes > Actions > Edit code

Step 2: Go to Assets > base.css and paste this at the bottom of the file.

@media screen and (min-width: 990px){
.collection .grid--quarter-max.grid--4-col-desktop .grid__item {max-width: 33% !important;}
.collection .grid--4-col-desktop .grid__item { width: calc(33% - 1rem * 3 / 3) !important;}
}

 

In the future, I'll email you for a quick response.

suyash1
Shopify Partner
3730 409 611
sure, happy to know that you found the answer.
You are welcome to contact me, my email - suyash.patankar@gmail.com ,My timezone is GMT+5:30