Solved

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

earthtoplanet
Explorer
46 6 8

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)
suyash1
Shopify Partner
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI

View solution in original post

Replies 9 (9)

suyash1
Shopify Partner
9077 1129 1479

@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

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
earthtoplanet
Explorer
46 6 8

@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
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
earthtoplanet
Explorer
46 6 8

Fantastic. Thank you @suyash1! That worked.

suyash1
Shopify Partner
9077 1129 1479

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
earthtoplanet
Explorer
46 6 8

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
9077 1129 1479
sure, I will share the code, you can contact me on email too for quick
communication, you have my email below.
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI
earthtoplanet
Explorer
46 6 8

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
9077 1129 1479
sure, happy to know that you found the answer.
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
paranormal story video using AI