Jump to content

2 Products per row on Mobile view

Recommended Posts

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

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?

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Fantastic! Can you upvote my answer?

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 10 months later...

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! 

Link to comment
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;
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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:

 

image.png.32705d317cae958aea5cd9a26ef3a94a.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 2 months later...

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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
  • 2 months later...
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.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.