How can I adjust the Dawn theme for 2 products per row on mobile?

Store Design
1

Hi, I’m using Dawn and the Collections > All page looks horrendous on mobile (very cramped with text on top of each other). How can I have 2 products per row on mobile (I don’t mind 4 per row on desktop which is how it is now)?

Tried adding this code to base.css but didn’t work.

.grid–1-col .grid__item {
width: calc(100% / 4)!important;
max-width: 25% !important;
}

.grid–1-col .grid__item {
width: calc(100% / 2)!important;
max-width: 50% !important;
}

Thanks!

1 Like
2

Hi @kawaiicelia1105 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/component-product-grid.css->paste below code at the bottom of the file:
.product-grid .grid__item {
    max-width: unset !important;
}

Hope it can help you.

1 Like
3

omg amazing, thanks so much! :slightly_smiling_face:

1 Like
4

Hi @kawaiicelia1105 ,

Glad it is the solution for you. ^^