Ivanw Posted October 21, 2022 Share Posted October 21, 2022 (edited) Hi, Anyone knows how to change my product display from 1 to 2 on mobile? Site url: https://www.soilboy.sg/ Edited October 21, 2022 by Ivanw More Info Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 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! Kazaue and Ivanw 1 1 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ivanw Posted October 21, 2022 Author Share Posted October 21, 2022 Hey Ziggy, Thanks for your help! but unfortunately didnt work for me after I paste it on the custom css! Any idea why? Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 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 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ivanw Posted October 21, 2022 Author Share Posted October 21, 2022 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? Link to comment
Ivanw Posted October 21, 2022 Author Share Posted October 21, 2022 or instead I would like to keep the pagination for mobile but continuous scrolling on browser. Do you think this is possible? Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 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 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted October 21, 2022 Share Posted October 21, 2022 Try this thread: https://forum.squarespace.com/topic/166170-getting-around-shop-all-200-max-products-limitation/ Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
AmarniF Posted September 12 Share Posted September 12 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
tuanphan Posted September 14 Share Posted September 14 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; } } Ziggy 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
dgoodman1 Posted September 15 Share Posted September 15 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! Link to comment
Ziggy Posted September 15 Share Posted September 15 @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: dgoodman1 and calibratedconcepts 2 Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
dgoodman1 Posted September 15 Share Posted September 15 Thank you so much! I had no idea! Ziggy 1 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