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! 

Hi is anyone having issues with their products no longer showing as 2 in the one row on mobile view now? 

I used CSS months ago to set up the product view like that when using your phone, and suddenly over night it seems something has happened and the code no longer works? Products are just stacked on top of eachother even with the custom code being pasted in the CSS part. It's worked fine for months and randomly isnt working now - any advice as I checked a few other websites out that I know use squarespace and it has happened to them now aswell! 

On 9/12/2023 at 10:22 AM, AmarniF said:

Hi is anyone having issues with their products no longer showing as 2 in the one row on mobile view now? 

I used CSS months ago to set up the product view like that when using your phone, and suddenly over night it seems something has happened and the code no longer works? Products are just stacked on top of eachother even with the custom code being pasted in the CSS part. It's worked fine for months and randomly isnt working now - any advice as I checked a few other websites out that I know use squarespace and it has happened to them now aswell! 

You can add this to Website > Website Tools > Custom CSS to fix problem

@media screen and (max-width: 767px ) {
    .products.collection-content-wrapper .list-grid {
        display:grid !important;
        grid-template-columns: 1fr 1fr !important;
    }
    .products.collection-content-wrapper .grid-item {
        width: 100% !important;
    }
}

I'm having the same issue. When checking my website on mobile, I noticed my products were no longer in rows of 2, and no css I try to re-add is working?

I'm always also getting the 'missing opening '{'' error come up and i can't seem to fix it!

@dgoodman1 You no longer need CSS to have a 2-column grid on their mobile product page, this feature has been added to the store section settings. You can find it by editing the store section and toggling the mobile view:

Thank you so much! I had no idea!

Hi @Ziggy, I don't seem to have the editing feature. I am assuming my one is old version?

Could you please have a look my website and help me to set the mobile view that is displaying 2 products in a row. 

www.walkintheparknz.com/stadium-2023

Thanks

Yes, you are on an old version of Squarespace, but you can try this Custom CSS to achieve the same effect:

@media only screen and (max-width: 700px) {
  #productList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

Let me know how that works for you.

@Ziggy Omg. I have been wanting to fix this problem so long and it works now. 

Thank you so so much !!

6 hours ago, littleprojectsnz said:

Thank you so so much !!

You're welcome, I'm sorry you didn't see this 3 months ago when I shared it.