Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Responsive

Home Forums Support Responsive

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1540822
    JAVIER

    Hi,

    Product listings do not display well on mobile.

    I have configured the theme so that 4 columns are displayed on PC, 2 columns on tablet and 1 column on mobile.

    But on the mobile you still see 4 columns.

    Where is the problem?

    Thanks

    #1540910
    JAVIER

    Please, any help?

    #1541005
    David
    Staff
    Customer Support

    Hi there,

    can you share a link to your site so we can see what the issue is?

    #1541413
    JAVIER

    Hi David,

    It’s WP Rocket and Elementor’s problem

    I have disabled CSS optimization in WP Rocket

    The problem with Elementor, when I use the Products module and select that in mobile I want a single column, it does not occupy the entire width of the screen.

    To solve the Elementor problem I have included this code:


    @media
    (max-width: 768px) and (min-width: 350px) {
    .elementor-widget-container .woocommerce .wc-columns-3 ul.products li.product,
    .elementor-widget-container .woocommerce-page .wc-columns-3 ul.products li.product,
    .elementor-widget-container .woocommerce-page.columns-3 ul.products li.product,
    .elementor-widget-container .woocommerce.columns-3 ul.products li.product {
    width: 95%;
    margin-left: 2%;
    float: left! important;
    }
    }

    @media
    (max-width: 768px) and (min-width: 350px) {
    .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: 95%;
    margin-left: 2%;
    float: left! important;
    }
    }

    The code works, but I don’t know if what I have done is correct.

    You can see the result here:

    https://ortosureste.es/camas-elevacion-columnas-telescopicas/

    Thanks

    #1541893
    David
    Staff
    Customer Support

    Glad to hear you found the solution – and thanks for sharing that!
    It looks good to me!

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