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
  • How to Fix Elementor and Cloudflare Rocket Loader issue
  • How to hide Google Recaptcha Badge in Elementor
  • WordPress WP-VCD malware attack — Solution I found to resolve this