How to display Mobile product list in 2 columns for Woocommerce in Elementor

Try this:

@media only screen and (max-width: 736px) {
  .woocommerce ul.products li.product {
    width: 49.0% !important;
    margin: 0.5% 4% 0.5% 0;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of-type(3n+1) {
    clear: none !important;
  }
  body.woocommerce ul.products.columns-3 li.product:nth-of_type(2n+1) {
    clear: both !important;
  }
}

Two columns is too tight on very small screens. There’s a lot of work to do to get this right for various resolutions.

Hello !Cześć !Bonjour !Korek ? I’m Ludovic Verbeeck, a creative director and designer

I live for Design and Technology as a Graphic and Web Designer. You can contact me through the contact page for your new project!

The latest on what’s moving the web, in your inbox every morning
Other Article that might interest you
  • How to display Mobile product list in 2 columns for Woocommerce in Elementor
  • Hello !Cześć !Bonjour !Korek ? I’m Ludovic Verbeeck, a creative director and designer
  • My first Cafe Racer project – a 90′ BMW K100
  • My first Distinguished Gentleman’s Ride on my BMW k1100RS
  • The Shungite and how it helped my dog