Solved

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

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)
dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 9 (9)

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
rawbird
Tourist
6 0 1

@dmwwebartisan 

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

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
rawbird
Tourist
6 0 1

...

dmwwebartisan
Shopify Partner
12280 2546 3694

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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
rawbird
Tourist
6 0 1

Awesome that worked 🙂 

many thanks

dmwwebartisan
Shopify Partner
12280 2546 3694

@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 | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app