[Resolved] Woocommerce product colums on mobile (archives)

Home Forums Support [Resolved] Woocommerce product colums on mobile (archives)

Home Forums Support Woocommerce product colums on mobile (archives)

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #605020
    Jarno

    On mobile the woocommerce shop shows only one column, however I want to change this at least for tablet devices to more columns than 1. Let’s say that I want 3 or 2 columns on tablet portrait mode. Are there any standard settings in GP to do this?

    Thanks!

    GeneratePress 2.1.2
    #605140
    David
    Staff
    Customer Support

    Hi, you may find this topic of use Tom has provided CSS for 2 columns in portrait tablet mode

    https://generatepress.com/forums/topic/column-shop-layout-in-desktop-ipad-mobile/#post-470371

    #606034
    Jarno

    I will look into to it. For now I will mark this one as resolved.

    Thanks again!

    #606036
    David
    Staff
    Customer Support
    #606121
    Jarno

    So I added the CSS from the topic mentioned by you. However nothing is happening and I don’t understand why.
    Used code is below. I added this to the extra CSS.

    @media only screen 
    and (min-device-width : 768px) 
    and (max-device-width : 1024px) 
    and (orientation : portrait) {
        .woocommerce .wc-mobile-columns-1 ul.products li.product, 
        .woocommerce-page .wc-mobile-columns-1 ul.products li.product {
    	width: 46.2%;
            clear: none !important;
        }
    
        .woocommerce .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1), 
        .woocommerce-page .wc-mobile-columns-1 ul.products li.product:nth-child(2n+1) {
    	clear: both !important;
        }
    }
    #606149
    David
    Staff
    Customer Support

    Hi Jarno, ok you’re using Elementor. That changes things a bit. Can you try this code instead:

    @media (max-width: 768px) and (min-width: 420px) {
        .elementor-widget-container .woocommerce .wc-columns-4 ul.products li.product, 
        .elementor-widget-container .woocommerce-page .wc-columns-4 ul.products li.product, 
        .elementor-widget-container .woocommerce-page.columns-4 ul.products li.product, 
        .elementor-widget-container .woocommerce.columns-4 ul.products li.product {
            width: 48%;
            margin-left: 2%;
            float: left !important;
        }
    }
    #606159
    Jarno

    Nope, doesn’t work either. Nothing changes.
    Just to let you know, I also run CSSHero on this website.

    #606199
    David
    Staff
    Customer Support

    I updated the code above, give that a try…..

    #606211
    Jarno

    Yes! This worked.

    Thank you very much!

    #606213
    David
    Staff
    Customer Support

    Phew…. at last lol! Glad it worked!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.