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
