Custom code for two-column product view on Smartphone

Hi everyone,

I would like to change the mobile view of my store. Since we offer many products, we would like to have two columns of products displayed in the mobile view and not one as set by Squarespace. Unfortunately this is not so easy to change as thought and my programming skills are not sufficient for this, so I wanted to ask if anyone here knows how I can solve this quickly and easily. 

Thank you,
Stefanie

@StefanieR You didn't mention which version of Squarespace you're using. Also would it be possible to share your site URL? Thanks!

You can try adding this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
    .products.collection-content-wrapper .list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 10px;
}
}

On 8/16/2023 at 1:11 PM, tuanphan said:

You can try adding this code to Design > Custom CSS (or Website > Website Tools > Custom CSS)

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
    .products.collection-content-wrapper .list-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    grid-column-gap: 10px;
}
}

 

Thank you so much - it worked 🥳