Jump to content

2 columns on mobile view not working!! SOS please help!

Recommended Posts

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
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  ⬇️

image.thumb.png.b450c52286bcaf32aa933599526323a0.png

Edited by paul2009
Edited for clarity

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing 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 free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

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

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) 

 Did I help? Buy me a coffee?

Link to comment

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

example 1.png

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

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) 

 Did I help? Buy me a coffee?

Link to comment
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) 

 Did I help? Buy me a coffee?

Link to comment

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!

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

 Did I help? Buy me a coffee?

Link to comment
  • 1 month later...

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
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.

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) 

 Did I help? Buy me a coffee?

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.