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

Store Design
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
2021-10-31 10_02_39-Window.png283×856 17.3 KB

2

@rawbird

Please share store URL and store front password .

Thanks!

3

@dmwwebartisan

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

4

@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!

5

I am sorry but the solution does not solve the problem.

2021-10-31 14_02_26-Window.png
2021-10-31 14_02_26-Window.png1221×693 57.4 KB

2021-10-31 14_03_27-Window.png
2021-10-31 14_03_27-Window.png1590×673 128 KB

6

@rawbird

Please share your store preview URL

Thanks!

7

…

1 Like
8

@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;}
}
2 Likes
9

Awesome that worked :slightly_smiling_face:

many thanks

10

@rawbird

Any problem Let me know & welcome again Thanks!