[Support request] woocommerce 2 columns on mobile not working

Home Forums Support [Support request] woocommerce 2 columns on mobile not working

Home Forums Support woocommerce 2 columns on mobile not working

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #875772
    Long

    Hello

    Can you advise why on Shop page 2 columns mobile working when setting it in Customize, but on the homepage when using Woocommerce shortcode it displays in 1 column only

    Thank you

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #875785
    Long

    somehow it doesn’t add “wc-mobile-columns-2” class into the shortcode html

    #875857
    Leo
    Staff
    Customer Support

    Hi there,

    That’s the expected behavior actually – the customizer options don’t apply to shortcode currently.

    I had a chat with Tom recently about it and apparently it’s a bit tricky to do.

    Give this CSS a shot though:

    @media (max-width: 768px) {
        .woocommerce[class*=columns-] ul.products li.product {
            width: 50%;
            float: left !important;
            clear: both !important;
        }
    }

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

    Let me know if this helps 🙂

    #876084
    Long

    Thanks for your reply but it is not working.

    It seems woocommerce-mobile.min.css’s important value take control of everything

    #876278
    David
    Staff
    Customer Support

    Hi there,

    try making the selectors very specific like so:

    @media (max-width: 768px) {
        .woocommerce.columns-4 ul.products.columns-4 li.product {
            width: 50%;
            float: left !important;
        }
    }
    #877749
    Long

    thanks it is working. only 1 issue is that there are some rows display only 1 product. the clear: none important setting in plugins/gp-premium/woocommerce/functions/css/woocommerce-mobile.min.css?ver=1.7.8 it should be clear both. How do i fix that?

    #877820
    David
    Staff
    Customer Support

    Try including this within the media query CSS i gave you above:

    .woocommerce.columns-4 ul.products.columns-4 li.product.first {
        clear: both !important;
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.