[Resolved] GPP 1.9.1 Woo columns

[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?

[Tom]

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 🙂

[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?

[David]

Hi there,

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

[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.

[David]

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.

[Marinex]

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

[David]

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

[Author]

Posts