Make product page 3 column for desktop and 2 columns for mobile

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;
}

That worked! Thank you so much

You no longer need to use code to get two columns on mobile. There is now a setting for this.

Let us know how it goes.

@creedon actually when you do that, it applies also to the desktop style. There is no differenciation on the back end if you change on the desktip size it will apply the same on the mobile style.

1 hour ago, Kinreu said:

actually when you do that, it applies also to the desktop style. There is no differenciation on the back end if you change on the desktip size it will apply the same on the mobile style.

Not in my experience.

And we can see the CSS changing in the code.

okay, so probably just a problem with image gallery items.