How can I modify my product page to display a 2-column grid on mobile?

[ailene]

Anyone know how to change product page so that it is 2 columns of products instead of one in the mobile version.

Shop URL: https://www.fieldofhope.nl/

[suyash1]

@ailene - please add given css to the very end of your theme.scss file and check

.template-collection .card-list__column{display: flex;    flex-wrap: wrap;}

.template-collection .card-list__column .card { width: 50%; padding: 5px;}

[ailene]

Now i have on web 6 in a row. instead of 3

[ailene]

IT’s still 6 in a row instead of 3

is it also possible to make the width from side to side

[suyash1]

@ailene - very sorry, remove those lines and add this, I forgot media queries

@media screen and (max-width:749px){
.template-collection .card-list__column{display: flex;    flex-wrap: wrap;}
.template-collection .card-list__column .card { width: 50%; padding: 5px;}
}