FROM CACHE - en_header

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
11014 2377 3400

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 | Click here GemPages The most powerful Shopify page builder.

View solution in original post

Replies 7 (7)
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11014 2377 3400

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 | Click here GemPages The most powerful Shopify page builder.
krollbymom
Excursionist
11 0 5
Jacquline
Excursionist
46 0 7

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
46 0 7

@dmwwebartisan Any update maybe? Would be super grateful! 

sandranobre
Excursionist
35 2 3

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