Product Archive Column Bug

  • Resolved Daniel Chan

    (@danielchan23)


    4 years, 11 months ago

    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 Gabriel – a11n

    (@gabrielfuentes)

    4 years, 11 months ago

    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:

    https://www.screencast.com/t/2Fh6itVTVc6G
     
    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 years, 11 months ago by Gabriel - a11n.
    • This reply was modified 4 years, 11 months ago by Gabriel - a11n. Reason: Added an extra selector
    Plugin Support Gabriel – a11n

    (@gabrielfuentes)

    4 years, 10 months ago

    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)

The topic ‘Product Archive Column Bug’ is closed to new replies.