2 Products per row on Mobile view

Hi,

Anyone knows how to change my product display from 1 to 2 on mobile?

Site url: https://www.soilboy.sg/

Try this custom CSS:

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

Let me know if that works!

Hey Ziggy, 

Thanks for your help! but unfortunately didnt work for me after I paste it on the custom css! 
Any idea why?

This should work on the main store page, and from looking at your site, it is working. Were you wanting the homepage 3 products to be 2 across on mobile?

Hey Ziggy!

yeah it is working, thank you so much! 
Anyway I have another question, how can I display more products on my product page instead of just 20?

or instead I would like to keep the pagination for mobile but continuous scrolling on browser. Do you think this is possible?

Fantastic! Can you upvote my answer?

Try this thread: 

https://forum.squarespace.com/topic/166170-getting-around-shop-all-200-max-products-limitation/

Of course!