pawtheroom Posted September 8, 2023 Share Posted September 8, 2023 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. adxmxe 1 Link to comment
adxmxe Posted September 8, 2023 Share Posted September 8, 2023 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! Link to comment
Ziggy Posted September 8, 2023 Share Posted September 8, 2023 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
adxmxe Posted September 8, 2023 Share Posted September 8, 2023 3 minutes ago, Ziggy said: What happens if you change the width from 49% to 45%? Hi, thanks for the reply! Unfortunately, the images just got slightly smaller but remained in the same place Link to comment
Ziggy Posted September 8, 2023 Share Posted September 8, 2023 That's really odd, this code should be very robust. Can you share your website URL so I can take a look? adxmxe 1 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
adxmxe Posted September 8, 2023 Share Posted September 8, 2023 8 minutes ago, Ziggy said: That's really odd, this code should be very robust. Can you share your website URL so I can take a look? Sure, my site is: https://www.aelcollection.com/ Thank you 🙏 Link to comment
Houstonselects Posted September 9, 2023 Share Posted September 9, 2023 Same code, same problem! here is my site https://www.houstonselects.com/shop-all-1/sneakers/men Mobile view only Link to comment
Ziggy Posted September 9, 2023 Share Posted September 9, 2023 @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. Chris72503, Vibez, adxmxe and 2 others 2 1 2 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
adxmxe Posted September 9, 2023 Share Posted September 9, 2023 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 Houstonselects, Ziggy and Chris72503 2 1 Link to comment
Houstonselects Posted September 9, 2023 Share Posted September 9, 2023 It worked Thank you!!!! Ziggy 1 Link to comment
Ziggy Posted September 9, 2023 Share Posted September 9, 2023 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 Posted September 10, 2023 Share Posted September 10, 2023 Hi ! thank you for you help ! I was facing the same issue and tried the replacement code you posted, but the products are now not aligned and I don't really know how to fix it... If you have any ideas on how to solve this issue I would greatly appreciate it ! here is my website : https://www.archaismstudio.com/ Thank you ! Link to comment
Ziggy Posted September 10, 2023 Share Posted September 10, 2023 @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
Vibez Posted September 10, 2023 Share Posted September 10, 2023 On 9/9/2023 at 3:48 AM, 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. Just wanted to let you know that you are absolutely GOAT'd. Ziggy and Chris72503 2 Link to comment
Ziggy Posted September 10, 2023 Share Posted September 10, 2023 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
archaism Posted September 10, 2023 Share Posted September 10, 2023 5 hours ago, Ziggy said: @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? 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/ Link to comment
Ziggy Posted September 11, 2023 Share Posted September 11, 2023 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; } } archaism 1 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 Posted September 11, 2023 Share Posted September 11, 2023 8 hours ago, Ziggy said: 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; } } It worked perfectly ! Thank you so much ! have a nice day !! Ziggy 1 Link to comment
Solution Ziggy Posted September 14, 2023 Solution Share Posted September 14, 2023 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: 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
Ziggy Posted March 12 Share Posted March 12 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
ellesquarespace1 Posted April 27 Share Posted April 27 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 Link to comment
tuanphan Posted April 28 Share Posted April 28 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 In Your Custom CSS box, find and remove this code ellesquarespace1 1 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
ellesquarespace1 Posted April 28 Share Posted April 28 Thank you it worked! Do you know how to centre the "view options" button in mobile view? Same website. 50 minutes ago, tuanphan said: In Your Custom CSS box, find and remove this code Link to comment
tuanphan Posted April 30 Share Posted April 30 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. 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment