Houstonselects Posted September 9, 2023 Share Posted September 9, 2023 I did a custom CSS with the following code to make the mobile view of my site have 2 columns instead of 1, but it randomly stopped working today, does anyone know why? : @media only screen and (max-width:640px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } } It worked for the first few weeks, not anymore though. Link to comment
Houstonselects Posted September 9, 2023 Author Share Posted September 9, 2023 This is the site: https://www.houstonselects.com/shop-all-1/sneakers/men Mobile View only Link to comment
sssupers Posted September 9, 2023 Share Posted September 9, 2023 I have this issue on hundreds of websites. @media query is not working anymore. Found only one workaround: avoid Squarespace. Hi, I'm sssupers. Link to comment
paul2009 Posted September 9, 2023 Share Posted September 9, 2023 (edited) On 9/9/2023 at 8:03 AM, Houstonselects said: I did a custom CSS with the following code to make the mobile view of my site have 2 columns instead of 1, but it randomly stopped working today, does anyone know why? Your CSS isn't working because Squarespace have just changed the CSS that determines how the mobile store view is displayed. Instead of the CSS you are using to try to define the columns using Flexbox, I recommend you use the CSS Grid that Squarespace are already using this to define the columns. If you stick with CSS Grid, you'll need fewer lines of CSS to change the number of columns. There's an example in this similar thread. Did this help? Please give feedback by clicking an icon below ⬇️ Edited September 11, 2023 by paul2009 Edited for clarity Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
Houstonselects Posted September 9, 2023 Author Share Posted September 9, 2023 The above did not work , but i found this on another forum that did work: @media only screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: 1fr 1fr; } } Link to comment
Jil3987 Posted September 10, 2023 Share Posted September 10, 2023 Hi, Our site uses the standard code that you find on this forum for having two products side by side on mobile. After a recent Apple update (or Squarespace update?) this code doesn’t seem to work anymore and products show 1 by 1. Anyone knows how to change or update the code? Thanks! Jil Link to comment
Jil3987 Posted September 10, 2023 Share Posted September 10, 2023 It seems many seem to have the same problem. I found this answer on another forum member and this one has solved it: @media only screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: 1fr 1fr; } } Link to comment
hellovonnie Posted September 11, 2023 Share Posted September 11, 2023 Hello, it's been a while since i posted here. And for a time my website worked well on mobile. But since yesterday it changed back to only showing one column of images on mobile. How did this happen and how can i change it back to having 2 columns again? Thank you advance Link to comment
Ziggy Posted September 11, 2023 Share Posted September 11, 2023 Try this code instead of what you had before: @media only screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: 1fr 1fr; } } 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
hellovonnie Posted September 12, 2023 Share Posted September 12, 2023 17 hours ago, Ziggy said: Try this code instead of what you had before: @media only screen and (max-width:767px) { .products.collection-content-wrapper .list-grid { display: grid; grid-template-columns: 1fr 1fr; } } Thank you so much, this fixed it! Ziggy 1 Link to comment
Scoots_X Posted September 12, 2023 Share Posted September 12, 2023 Hi @Ziggy, Today my shopping coulmns broke too! Could you please help me also. Ive raised a ticket with Squarespace but they take some time to reply and hoping to get this resolved asap. I have entered in the code and it works for 2 columns, but it looks kinda funky (the images are really small and the text breaks over multiple lines mid-words, example pic attached). Really appreciate all your help - Thankyou! -Amber Link to comment
Ziggy Posted September 12, 2023 Share Posted September 12, 2023 14 minutes ago, Scoots_X said: Could you please help me also. Ive raised a ticket with Squarespace but they take some time to reply and hoping to get this resolved asap. Squarespace support can't help with Custom Code. Can you share your website URL and this page? 15 minutes ago, Scoots_X said: I have entered in the code and it works for 2 columns, but it looks kinda funky I'm guessing you probably have this CSS still included, you should remove it: .products .grid-item { width: 48%; } Scoots_X 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Scoots_X Posted September 12, 2023 Share Posted September 12, 2023 You are actually THE BEST!! Thats exactly what it was! I entered the new code and removed that 48% part. It is working now - thankyou 🙂 My site is https://www.lumierechandlery.com.au/shop if you want to double check it but I tested on my phone and its looking normal again 🙂 thankyou 1 million! Ziggy 1 Link to comment
Ziggy Posted September 12, 2023 Share Posted September 12, 2023 1 minute ago, Scoots_X said: You are actually THE BEST!! Thats exactly what it was! I entered the new code and removed that 48% part. It is working now - thankyou 🙂 My site is https://www.lumierechandlery.com.au/shop if you want to double check it but I tested on my phone and its looking normal again 🙂 thankyou 1 million! Brilliant, no need for me to check if it's working 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
Ziggy Posted September 14, 2023 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
rcook1148 Posted October 19, 2023 Share Posted October 19, 2023 Hi, I'm having a related problem -- my mobile product page was working fine, with 2 product columns displayed (using the outdated CSS), until suddenly it wasn't. The products were now displayed in a single column. I've tried various CSS fixes including the above, and also tried the new feature recently added in the store section settings. While these fixes got me back to 2 columns, they all resulted in tiny product images, whereas before, the images -- even in 2 columns -- were much larger. Any ideas? Thank you -- Link to comment
Ziggy Posted October 20, 2023 Share Posted October 20, 2023 7 hours ago, rcook1148 said: I've tried various CSS fixes including the above, and also tried the new feature recently added in the store section settings. While these fixes got me back to 2 columns, they all resulted in tiny product images, whereas before, the images -- even in 2 columns -- were much larger. It sounds like you haven't removed all of the CSS that was originally making the images/products smaller, if you find that and remove it then the images will go back to full size. rcook1148 and paul2009 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! 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) 🔲 SQSP Themes (Referral link) ✨ Spark Plugin (Referral link) 🖼️ Gallery Lightbox Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
rcook1148 Posted October 23, 2023 Share Posted October 23, 2023 Thank you Ziggy! All's good now Link to comment
AJames Posted July 8 Share Posted July 8 Hi there, I am using the Wells template and am having the same issue. I would like to have 2 column masonry view for mobile. When I use the suggested code, it does work, however it displays a large gap between the landscape images, rather than having a thin, equal gap, as is the case with desktop view. See screenshot below. Can anyone advise on this please? Link to comment
tuanphan Posted July 13 Share Posted July 13 On 7/9/2024 at 12:41 AM, AJames said: Hi there, I am using the Wells template and am having the same issue. I would like to have 2 column masonry view for mobile. When I use the suggested code, it does work, however it displays a large gap between the landscape images, rather than having a thin, equal gap, as is the case with desktop view. See screenshot below. Can anyone advise on this please? Can you share link to this page? We can check easier 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