Support » Plugin: WooCommerce » Product Archive Column Bug

  • Resolved Daniel Chan

    (@danielchan23)


    Hi there,

    I’m facing a small issue here. I’ve set the product archive column on mobile as 1 column.

    However, I’m still getting two column even after I flush cache etc. Previously, I got some help to make the images bigger by adding this shortcode, but I don’t think this is the cause :

    @media (max-width: 768px) {
        .woocommerce[class*="columns-"].columns-3 > ul.products li.product {
            width: 140px;
        }
    }

    After removing this, the images turn small and I also couldn’t set to 1 column, like so : https://snipboard.io/D1yb6s.jpg

    Hope to hear from you soon. Thanks!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Support gabrielfuentes

    (@gabrielfuentes)

    Hi @danielchan23 👋

    This can be fixed with some custom CSS. Under Customize > Additional CSS, you can add the following code:
     

    /* Increase image width and change columns layout to 1 on mobile */
    @media (max-width: 768px) {
        .archive .woocommerce[class*="columns-"].columns-3 > ul.products li.product {
            width: 250px !important;
            margin: auto!important;
        }
        .archive .elementor-element.elementor-products-grid ul.products {
            grid-template-columns: repeat(1,1fr) !important;
        }
    }

    Results:

    07.14.2021-09.18.11
     
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    I hope that helps 🙂

    • This reply was modified 4 months, 2 weeks ago by gabrielfuentes.
    • This reply was modified 4 months, 2 weeks ago by gabrielfuentes. Reason: Added an extra selector
    Plugin Support gabrielfuentes

    (@gabrielfuentes)

    We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

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