How to change product grid from 4 products to 3 with the theme Dawn?

Solved
rawbird
Tourist
6 0 1

Hi support,

How can I change product grid from 4 products to 3 with the theme Dawn?

I am unable to select this option, see attachment:

 

2021-10-31 10_02_39-Window.png

 

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
9731 2226 3053

This is an accepted solution.

@rawbird 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 750px){
.grid--quarter-max.grid--4-col-desktop .grid__item {max-width: 37% !important;}
.grid--4-col-desktop .grid__item {width: calc(33% - 1rem * 3 / 4) !important;}
}
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 9 (9)
dmwwebartisan
Shopify Partner
9731 2226 3053

@rawbird 

Please share store URL and store front password .

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 →
rawbird
Tourist
6 0 1

@dmwwebartisan 

Could you please tell me the solution without permission to access the shop?

dmwwebartisan
Shopify Partner
9731 2226 3053

@rawbird 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 789px){
#main-collection-product-grid .grid__item{
     width: 100% !important;
     max-width: 33.3333% !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 →
rawbird
Tourist
6 0 1

I am sorry but the solution does not solve the problem.2021-10-31 14_02_26-Window.png2021-10-31 14_03_27-Window.png

dmwwebartisan
Shopify Partner
9731 2226 3053

@rawbird 

Please share your store preview 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
9731 2226 3053

This is an accepted solution.

@rawbird 

please Go to Online Store->Theme->Edit code then go to assets/base.css ->paste below code at the bottom of the file.

@media screen and (min-width: 750px){
.grid--quarter-max.grid--4-col-desktop .grid__item {max-width: 37% !important;}
.grid--4-col-desktop .grid__item {width: calc(33% - 1rem * 3 / 4) !important;}
}
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

rawbird
Tourist
6 0 1

Awesome that worked  

many thanks

dmwwebartisan
Shopify Partner
9731 2226 3053

@rawbird 

Any problem Let me know & welcome again 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 →