Display shop products in 2 columns on mobile

  • Resolved kristincali

    (@kristincali)


    6 months, 1 week ago

    I have tried every code I could find on the whole internet and nothing is working for me. I’m using WooCommerce with the Riverbank theme. I would like to have my products display in 2 columns on mobile view only, on my SHOP page (I have a shop widget on my homepage and don’t want that to be changed). Can anybody help? Thank you!

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

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

  • Hi @kristincali,

    Thank you for contacting WooCommerce Plugin Support. I understand you are looking to display 2 products per line on mobile view. This can be done by adding custom CSS code to your site. Please use the following CSS code:

    /* Showing 2 products in 1 line */
@media (max-width: 767px) { 
.wp-block-query.is-layout-flow.wp-block-query-is-layout-flow ul {
    display: flex;
    flex-wrap: wrap;
}

.wp-block-query.is-layout-flow.wp-block-query-is-layout-flow li {
    width: 45% !important;
}
}

    To apply this code to your website, you follow the detailed guide here.? Here’s what the result will look like:?

    You should see the changes reflected on your website immediately. 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).

    Let us know if there’s anything else we can help you with.

    Thread Starter kristincali

    (@kristincali)

    Finally, that worked! I was getting frustrated because I’m very familiar with CSS but couldn’t manage this for some reason. Thank you so much.

    I’m glad we were able to help! If you have a few minutes, we’d love if you could leave us a review: https://www.ads-software.com/support/plugin/woocommerce/reviews/

    Please let us know if there’s anything else we can do to help or if you have any questions.

    Have a wonderful day!

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