How do I change my "Collections" pages to show 3 products per row? (Dawn Theme)

Solved
krollbymom
Excursionist
11 0 5

Hi.... how do I change my "Collections" pages to show 3 products per row? 

Just the Collections pages. Not the "Homepage" and not "All Products" page.

My website is krollbymom.com

Thank you

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
10710 2338 3314

This is an accepted solution.

@krollbymom 

 Please follow these steps: - 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;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Replies 7 (7)
dmwwebartisan
Shopify Partner
10710 2338 3314

@krollbymom 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
10710 2338 3314

This is an accepted solution.

@krollbymom 

 Please follow these steps: - 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;}
}

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
krollbymom
Excursionist
11 0 5
Jacquline
Excursionist
31 0 6

Hey @dmwwebartisan I used your code it worked great thank you! 

 

All my collections have the 3 products per row now and its great, but now also the featured collection on homepage has 3 products, and I prefer it to have 4 on a row. Is it possible to only make it have 4? 

Jacquline
Excursionist
31 0 6

@dmwwebartisan Any update maybe? Would be super grateful! 

sandranobre
Excursionist
30 2 2

Thank you for this! It worked for me as well! BUT, now the product pictures is all blurry. Why?