Display Woocommerce products in two columns on mobile

  • Hi everyone! I again have a problem displaying blocks of Woocommerce products, such as “All Products” or “Best sellersproducts”
    Indeed, as for the example page that I linked, I cannot display the products in two columns when it is consulted from a mobile.

    I already asked the question 8 months ago, and Annah gave me a perfectly working solution (thanks again !) :

    @media (max-width: 768px) {
    .wc-block-grid .wc-block-grid__products:not(.thisisforspecificity) .wc-block-grid__product, .wc-block-carousel .wc-block-grid__product {
    max-width: 50%;
    }
    .wc-block-grid.has-4-columns .wc-block-grid__products {
    display:flex;
    }
    .wc-block-grid.has-4-columns .wc-block-grid__product {
    flex: 1 0 50%;
    min-width: 40%;
    padding: 0;
    margin: 0 0 24px;
    }
    }

    But for a few days (I don’t know when it started), it hasn’t worked anymore. I once again have only one product displayed on the left part of the screen, and nothing on the right part. I did some tests, and this problem only appears when the screen is 480 pixels or less. Beyond that, two products are displayed correctly. Except that most smartphones are 480 pixels……

    I specify that I have not changed anything on my site, I have not added any plugins, touched the customizer etc… I just updated WordPress. Can you help me ?

    Thanks for your help !

    Irina

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi, Irina!

    I sent a response to your forum topic on our website:

    I’m sorry for the delay in getting back to you.

    Could you try editing the custom CSS code to this:

    @media screen and (max-width: 768px) {
    .wp-site-blocks .wc-block-grid .wc-block-grid__products {
        grid-template-columns: 1fr 1fr!important;
        column-gap: 0.5rem;
    }
}

    Let us know if this works for you.

    Regards,
    Karla

    Thread Starter demirstringart

    (@demirstringart)

    Hi Karla !

    My apologies for the time it took to respond to you!

    I just replaced the original script with this one, but it doesn’t work…
    There is only one product per column and not 2…

    What can I do ?
    Thank you again for your help !

    Irina

    Hey there!

    I’m sorry for the delay.

    When I inspected, the <ul> tag is displayed as block so the CSS code I gave previously don’t work.

    Add this CSS code as replacement for the previous code I gave:

    @media screen and (max-width: 768px) {
    .wc-block-grid__products{
    display: grid!important;
    }
    .wp-site-blocks .wc-block-grid .wc-block-grid__products {
    grid-template-columns: 1fr 1fr!important;
    column-gap: 0.5rem;
    }
    }

    This is how it should work – https://share.zight.com/wbuBZv4D.

    Let me know how it goes.

    Regards,
    Karla

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Display Woocommerce products in two columns on mobile’ is closed to new replies.