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

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. 

This is the site:

https://www.houstonselects.com/shop-all-1/sneakers/men

Mobile View only

I have this issue on hundreds of websites.
@media query is not working anymore. 

Found only one workaround: avoid Squarespace.

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

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;
 }
}

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

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;
 }
}

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

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;
 }
}

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! 

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

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%;
}

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!

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!

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:

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

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.

Thank you Ziggy! All's good now