Dawn Theme - Collection page on mobile

[kawaiicelia1105]

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!

[Amlibolikha · Accepted solution]

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.

[kawaiicelia1105]

omg amazing, thanks so much! 🙂

[Amlibolikha]

Hi @kawaiicelia1105 ,

Glad it is the solution for you. ^^