how to display 3 products in a row on mobile

  • Resolved bsl2020

    (@bsl2020)


    4 years, 9 months ago

    trying to display 3 products in a row on mobile device, what i wrote below is only for 2 products in a row no matter each product only taking with 30% ,
    products are not displayed in line , after 2 products in a row, the 3rd product goes to next row.

    link : https://ibb.co/PcBML4T

    @media screen and (max-width: 768px) {
    .woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    width:30% !important;
    padding: 0px !important;
    margin: 0px !important;
    float: left !important;
    }
    }

    and function.php

    /**
    * Change number or products per row to 3
    */
    add_filter(‘loop_shop_columns’, ‘loop_columns’, 999);
    if (!function_exists(‘loop_columns’)) {
    function loop_columns() {
    return 3; // 3 products per row
    }
    }

    web link: https://myasianmart.com/product-category/shengxianchaoshi/pengrentiaoliao/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter bsl2020

    (@bsl2020)

    Tried this, it worked initially, but after updated WOO, start not working:

    @media screen and (max-width: 768px) {
    body.woocommerce ul.products.columns-4 li.product,
    body.woocommerce-page ul.products.columns-4 li.product {
    clear: none !important;
    width: 31% !important;
    float: left !important;
    margin: 0 3.5% 20px 0!important;
    }
    body.woocommerce ul.products.columns-4 li.product:nth-child(3n+0),
    body.woocommerce-page ul.products.columns-4 li.product:nth-child(3n+0) {
    margin-right: 0 !important;
    }
    body.woocommerce ul.products.columns-4 li.product:nth-child(3n+1),
    body.woocommerce-page ul.products.columns-4 li.product:nth-child(3n+1) {
    clear: both !important;
    }
    }

    Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Hey there!

    The frontend display of your site, including the mobile view of your shop pages, is handled by the theme you are using, so you would be best off contacting the theme support for more assistance with this. We don’t have any kind of expertise in this area.

    Hopefully that helps! Have a great one!

    Thread Starter bsl2020

    (@bsl2020)

    not helping.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘how to display 3 products in a row on mobile’ is closed to new replies.