Modify mobile column amount on featured collection Dawn Theme

ezg1099
Shopify Partner
6 0 0

So I have made a lot of modifications to the custom css for the featured collection section on the home page. I needed to have 10 columns which in a line to satisfy the client's need. However, on mobile now it is also making 10 columns where I really need it to be 5 columns and 2 rows. 

 

I have been trying to mess with things but cannot seem to find this solution. 

 

Website is https://overnightmelee.com

This is the css I currently have to make it possible to have it look correct on desktop. .collection .card__inner {
width: 50%;
margin: auto;
}
.collection .card__inner img {
width: 60%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.collection .card-information .price {
display: none;
}
.title-wrapper {
text-align: center;
}
.product-grid {
max-width: none;
width: 70%;
margin-left: auto;
margin-right: auto;
flex-wrap: nowrap;
}

 

This is the image of what i need on mobile without messing with the modifications ive already made to have 10  Overnight Melee-Home-Mobile Responsive-01.jpg

Replies 2 (2)

ezg1099
Shopify Partner
6 0 0

ezg1099_0-1713652327526.png

It currently looks like this on mobile and I cannot figure out why.

 

ezg1099
Shopify Partner
6 0 0

Can you just show me the solution on here please?