how to display 3 products in a row on mobile

  • Resolved bsl2020

    (@bsl2020)


    4 years, 9 months ago

    I 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.

    I have screen shot as https://ibb.co/PcBML4T

    for css, i have
    @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
    }
    }

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

  • I can’t examine your page with browser tools, but this sort of issue is usually down to the css clear style. Usually the last product in the row will have the “last” class, and this is styled clear:both, so the next products start on the next line. You can either find the code that is putting out the classes for the product blocks, or using css, remove the clears on every second product and put them on every third. If you can’t fix it please post a link to your site.

    Thread Starter bsl2020

    (@bsl2020)

    Hi, @lorro

    Problem: displaying 3 products on mobile

    The shop page link(product listing WITHOUT shortcode) is -https://myasianmart.com/shengxianchaoshi/

    The default(auto-generated category page WITHOUT shortcode) link is –
    https://myasianmart.com/shegnxianchaoshi/pengrentiaoliao/

    The category page link(product listing with SHORTCODE) is –
    https://myasianmart.com/xinxianchaoshi/

    Will the css style work for every product listing situation above with/without woocommerce shortcode displaying products into categories.

    Url No.2 gives page not found.

    I got this to work for urls 1 & 3:

    @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;
  }
}

    Your site has the woocommerce styles, siteground styles, a css optimizing system and the custom css, and these various styles are competing with one another. I am not hopeful.

    Thread Starter bsl2020

    (@bsl2020)

    @lorro

    After clear my cache, and refresh to the product pages, Amazing! Works beautifully! Wonderful!

    Appreciated! @lorro

    Best Regards,
    Bsl

    Thread Starter bsl2020

    (@bsl2020)

    @lorro

    I made a mistake on CDN and restored my file from back up and after restored I realized my product title and price are not centered. Its not from your css because i have not yet pasted on custom css. Strange.

    link: https://myasianmart.com/xinxianchaoshi/

    Tried the code below, not working. What might be the cause for the title not centered after restore from siteground server back up? Possible style loss?

    .woocommerce ul.products li.product .thunk-product .woocommerce-loop-product__title, .thunk-product .woocommerce-loop-product__title, .thunk-product .woocommerce-loop-product__title a { text-align:center !important;}

    .widget.woocommerce .product_list_widget .star-rating, span.product-title, span.woocommerce-Price-amount{text-align: center !important;}

    • This reply was modified 4 years, 9 months ago by bsl2020.
    • This reply was modified 4 years, 9 months ago by bsl2020.
    Thread Starter bsl2020

    (@bsl2020)

    I made the title and price to center working by using the code following:

    .thunk-product-content{text-align:center !important;}
    span.price {text-align:center !important;}

    LUCKY!!

    Thread Starter bsl2020

    (@bsl2020)

    The code worked perfectly smoothly before i restored my files and db this afternoon. now it dont work. just like suddenly the product title and price all not centered. strange. Would you able to see possible cause?

    @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;
    }
    }

    I’m seeing 3 products per row on mobile with centred title, price and something in red, so looks like you fixed it.

    Thread Starter bsl2020

    (@bsl2020)

    The theme matters, OCEANWP theme works by adjusting columns. @lorro , seems theme can override main layout.

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