Two column product page in mobile issue.

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.

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!

What happens if you change the width from 49% to 45%?

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  

That's really odd, this code should be very robust. Can you share your website URL so I can take a look?

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 🙏

Same code, same problem! 

here is my site 

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

Mobile view only

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

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

It worked Thank you!!!!

Glad this is working for you both!

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 !

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

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.

58 minutes ago, Vibez said:

Just wanted to let you know that you are absolutely GOAT'd

Haha, thanks!

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/

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

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