GPP 1.9.1 Woo columns

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 :)

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?

Hi there,

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

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.

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.

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

Woo's CSS can be a big pain - so i switched it to a CSS Grid to make it easier :) You're welcome.