Adding 2 rows for product mobile.

Site URL: https://www.southclothing.store

I am wanting to show 2 products for my mobile view. I have 3 products shown in a row for desktop, however when I go to mobile they are stacked. 

How do I force 2 rows for my product page?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}
}

1 hour ago, tuanphan said:

@media screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-column-gap: 10px; grid-row-gap: 10px; } }

Worked Perfectly, YOU LEGEND!

1 minute ago, michelleaishasmith said:

I tried to do this code for resort247.shop but it did not work!! Could you please advise 🙂
 would like to have 2 products per row on mobile view. Thanks!!!

I see 2 products on row on mobile here?