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.

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
*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Other Article that might interest you