How to change columns on mobile for all stones

Store Design
1

On mobile the collections list on the page https://bellissimacrystals.com/pages/all-stones has only 1 collection image per row I was wondering if there is a way to make them smaller to fit 2 per row on mobile?

My website is : https://bellissimacrystals.com/pages/all-stones

The password is: flahnu

2

@scalabur

sorry for that issue can you please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.min.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
@media screen and (max-width: 767px) {
.collection-grid .col-md {
    max-width: 50%;
    flex-basis: 50%;
}
}
3

Thank you so much Ketan! Huge help! One other thing now there are spaces between every 2 rows just wondering if there is a way to fix that?

4

@scalabur

yes please remove first one and add this

@media screen and (max-width: 767px) {
.collection-grid .col-md {
    max-width: 50%;
    flex-basis: 50%;
    padding: 0;
}
}