How to change product Card width for Dawn Theme

Store Design
, , ,
1

Shop preview: https://lupu89qto9zgq6d8-68796285242.shopifypreview.com

I want to make each product card wider, but only for mobile view, desktop view is good as it is.

Andy106_0-1684708022226.png
Andy106_0-1684708022226.png781Ă—814 182 KB

2

Hi @Andy106

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media screen and (max-width: 749px) {

.slider–tablet.grid–peek.grid–2-col-tablet-down .grid__item, .grid–peek .grid__item { width: calc(51% - var(–grid-mobile-horizontal-spacing) - 0rem) !important;}

}

Regards,

San

1 Like
3

Hello and thanks for getting back to me.
This fixes the issue on the home page, but it also messes up with the slider in the product landing page. Is there a way to isolate its effect only for the cards of the home page?

4

Hi @Andy106

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

There is not any way to isolate its effect only for the cards of the home page.

Regards,

San

5

Managed to fix this by using:

@media screen and (max-width: 749px){
.collection .grid–peek .grid__item {width: calc(55% - var(–grid-mobile-horizontal-spacing) - 0rem) !important;}
}