[Resolved] GPP 1.9.1 Woo columns

Home Forums Support GPP 1.9.1 Woo columns

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1100711
    Marinex

    Hi, I am having troubles using the Woocommerce column settings in the customizer.

    While on my Apple iPad 9.7″ 6th Gen it uses the mobile settings instead of the tablet one.

    Anyone have experienced this before?

    #1101238
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Our tablet options kick in at 1024px, and the mobile options kick in at 768px.

    You can tweak this with a filter:

    add_filter( 'generate_media_queries', function( $queries ) {
        $queries['tablet'] = '(min-width: 769px) and (max-width: 1024px)';
        $queries['mobile'] = '(max-width:768px)';
    
        return $queries;
    } );

    Let me know if you need more info 🙂

    #1102058
    Marinex

    Hi Tom. Thank you very much, works fine tweaking it that way!

    Do you have an idea on how to solve it on the front page where I use a shortcode for displaying products? Good ol css?

    #1102226
    David
    Staff
    Customer Support

    Hi there,

    which size tablet are you viewing the site on? I am seeing 2 columns on a 9.7″ iPad.

    #1102251
    Marinex

    Hi David. You must be on the front page then where i use a shortcode?
    On all archives I have three columns as of now on the same iPad as you.

    #1102263
    David
    Staff
    Customer Support

    Aah ok – try this CSS:

    @media(max-width: 1024px) and (min-width: 600px) {
        .home .woocommerce ul.products {
            display: grid;
            grid-template-columns: 33% 33% 33%;
        }
    
        .home .woocommerce ul.products:before {
            display: none;
        }
    
        .home .woocommerce ul.products[class*=columns-] li.product {
            width: 100%;
        }
    }

    Adjust the @media query to suit any changes you made to the tablet settings.

    #1102376
    Marinex

    Ah I see. Thank you very much David, this always gets me confused 🤷‍♂️

    #1102397
    David
    Staff
    Customer Support

    Woo’s CSS can be a big pain – so i switched it to a CSS Grid to make it easier 🙂 You’re welcome.

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