@media only screen and (max-width: 767px) {
.products.collection-content-wrapper .list-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
grid-column-gap: 2vw;
grid-row-gap: 4vw;
padding: 0;
}
}
On mobile view, the product grid will now show 2 columns instead of 1. You can change this to show more on mobile by changing "repeat(4,minmax(0,1fr))". If you turn your phone sideways and want 4 columns, you can adjust the max width for when the phone is sideways and create another css for when the phone is vertical.