[Support request] Conflict GP vs Elementor using Woocommerce Shortcode

[Michael]

I’m using a Woocommerce shortcode [recent_products limit=”4″ orderby=”menu_order” order=”ASC” columns=”4″] on the homepage and displays fine on desktop.

But there is some sort of conflict where putting the shortcode in an Elementor html module makes the products display in one column on mobile, rather than the two columns they would usually display in mobile when using only on a GP (no builder) page.

Is there any way to resolve the conflict using the Elementor html module?

[David]

Hi there,

you have this CSS in your child theme style sheet which is forcing woo columns to single on mobile devices:

@media (max-width: 500px) {

    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}

[Michael]

Thanks David!

[David]

You’re welcome

[Author]

Posts