Woocommerce tablet layout set for 2 columns - displaying one

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Hi Leo,

The info below is for a demo site that I cloned from Divi, so please ignore the remaining short codes. I do have another site that I rebuild from scratch in Generate Press and I am having the same problem with that one. If you want to see that one, I can create an account on that site too.

Thanks,

Susan

Hmm it looks like the iPad is a bit old and just passed the breakpoint of the 2 columns.

So this is iPad mini/air:
https://www.screencast.com/t/fmo5yHjL

And this is iPad:
https://www.screencast.com/t/vsIhio8H3E

Can you try adding this CSS?

@media (min-width: 600px) and (max-width: 768px) {
    .woocommerce #wc-column-container.wc-mobile-columns-1 .products, .wc-related-upsell-mobile-columns-1 .related ul.products, .wc-related-upsell-mobile-columns-1 .up-sells ul.products {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr);
    }  
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Thanks Leo, that works!

My iPad is not that old, I think I bought it in 2017, and it is still going strong! I am not so concerned about how it displays on my iPad, but how other tablet users will see it. Breakpoints are challenging.

Thanks,

Susan

No problem :)