Two column product and category on mobile view

Hi there,

Have you tried setting the product columns with mobile toggle on?
https://docs.generatepress.com/article/woocommerce-overview/#shop

Let me know :)

Hi Leo,

I've read your link but I couldn't get what you mean. Can you please guide me on this?

This option: https://www.screencast.com/t/dY9p7ibsP

This is the first time I see that option :) Thanks for your help!

No problem :)

Btw I recently found a problem with 2 column view. On upsells I prefer to display 4 products. After I set two columns on mobile view, it started to display first 2 products in first raw, and then 1 product in the next raw and the last one in the third raw. It looks very ugly :(

Can you check one of my product pages with 370px width?

https://www.aloeverauyelik.com/lrurunleri/siparis/lr-aloe-vera-jel-icecek-seftali-6li-set/

Not seeing the problem on my phone:
https://www.screencast.com/t/wL0j3Sq9dY

Not always but sometimes it looks like this: https://i.imgur.com/3x5cu2S.jpg

Hmm not sure why it would be "sometimes".

Does it still happen with the caching plugin disabled?

Yes it's cache related and solved, thanks Leo!

No problem :)

Hello,

I thought this problem has been solved but I still have this error on many pages. This problem occurs when the first product's name is too long.

Just check my home page on mobile, you'll see that sometimes only one product displayed in a raw: http://www.aloeverauyelik.com

Screenshot: https://imgur.com/a/4EGhcYg

I tried to show the problem on a video: https://youtu.be/Pxrzs3GPNKk

Thanks

Hi there,

the issue is the default Woo templates uses floats - you can use this CSS to force all the products to the same height to fix this:

@media (max-width: 768px) {
    .woocommerce[class*=columns-] ul.products li.product:not(.product-category) {
        min-height: 350px;
    }
}

In GP Premium 1.8 this issue should be resolved as we have implemented CSS Grid for displaying them.

Hello David,

I added it but didn't solved the problem. And when I add this CSS, it widens the space between category rows on the same page as well.

Please check my homepage again.