Hello, I'd like a code to make my product page have 3 columns for desktop view and 2 columns for mobile view.
I'm currently using the code below right now. It shows the 3 columns for desktop view in editor, but once I save it there's only 2 columns for both desktop view and mobile view.
@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: 30px;
grid-row-gap: 0px;
padding: 0;
}