Jump to content

Two column product page in mobile issue.

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

 

I've added below code to have my mobile version of site two show two columns of products,
 

@media only screen and (max-width:767px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item { width: 49%;
}
}

And for some reason, they are still divided into two columns but only showing one column.
Anyone know how I can solve this? Truly appreciate the help.

Link to comment

I'm having the exact same issue, had two product rows for months but this just happened out of the blue! Have been looking to see if there are any solutions but haven't seen anything yet. Spoke to support and it seems to have something to do with an update that broke the custom CSS. Let's hope someone can come in here and save the day!

image.thumb.png.e3fda931454969b3f45b0e6a0699f5cb.png

Link to comment

What happens if you change the width from 49% to 45%?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That's really odd, this code should be very robust. Can you share your website URL so I can take a look?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
@media only screen and (max-width:767px) {
 .products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }
}

Morning all! @Houstonselects @adxmxe @pawtheroom

Here's some replacement code for you to try, please let me know if 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 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
6 minutes ago, Ziggy said:
@media only screen and (max-width:767px) {
 .products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
 }
}

Morning all! @Houstonselects @adxmxe @pawtheroom

Here's some replacement code for you to try, please let me know if that works for you.

IT WORKED! Thanks a lot, Ziggy, means a lot! I wish you a blessed rest of your day. 

Also, let's hope it works for @pawtheroom and @Houstonselects

Link to comment

Glad this is working for you both!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

@archaism Happy to help but I don't see the products in two columns to help you fix the problem. Have you removed the code?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
58 minutes ago, Vibez said:

Just wanted to let you know that you are absolutely GOAT'd

Haha, thanks!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
11 hours ago, archaism said:

Hi, sorry I indeed removed the code but it should be back to two columns now. Please check the website when you can 🙂 https://www.archaismstudio.com/

Try this additional adjustment of the font size to help the design, add to Custom CSS:

@media screen and (max-width: 767px) {
  .collection-type-products .grid-title {
    font-size: 4vw;
  }
}

 

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

As a note to anyone wanting 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.thumb.png.0dd0596dc5fb82519688f6cd616d55d8.png

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 5 months later...
11 hours ago, benjiplant said:

Thank you! Worked perfectly

Delighted that helped you!

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 1 month later...
On 4/27/2024 at 11:31 AM, ellesquarespace1 said:

Hi there! I've used the 2-column grid on my mobile product page from the store section settings and for some reason, everything is looking not aligned. Any way to fix this? https://www.ellesentials.com/shop

image.thumb.png.c26ec1f04f8aeea206b0e970e985e222.png

In Your Custom CSS box, find and remove this code

image.png.32b86c496da2f2853016854019f1f0e3.png

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
On 4/28/2024 at 3:33 PM, ellesquarespace1 said:

Thank you it worked! Do you know how to centre the "view options" button in mobile view? Same website.

 

image.png.b8dd3d4068b0253d7dc4d9e8eb6fe3d6.png

 

 

 

You can use this code to Custom CSS box

span.sqs-view-options-button-inner {
    text-align: center !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

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.