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

Store Design
1

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!

2

@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
suyash1_0-1636519307909.png1366×768 206 KB

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 :disappointed_face:

earthtoplanet_0-1636520126402.png
earthtoplanet_0-1636520126402.png802×814 380 KB

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

4

@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

2 Likes
5

Fantastic. Thank you @suyash1 ! That worked.

1 Like
6

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

1 Like
7

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!

8

sure, I will share the code, you can contact me on email too for quick
communication, you have my email below.

9

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.

10

sure, happy to know that you found the answer.

1 Like