Return to previous page

How to change category/product per row ONLY for mobile?

This topic has 7 replies, 2 voices, and was last updated 4 years, 5 months ago ago by sy2hello

  • Avatar: sy2hello
    sy2hello
    Participant
    December 17, 2020 at 08:03

    Hi, I need some help with changing the number of products per row on mobile devices.
    In the theme option > woocommerce > product catalog, there’s an option to change product per row but no matter how many number I changed it to, on mobile view it will always show 2 product per row.

    #264422 Copied Theme version: 7.1
    6 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 17, 2020 at 08:10

    Hi,

    Add the next code in Theme Options > Theme custom CSS > Custom CSS for mobile:

    .products-grid .product {
    width: 100% !important;
}

    Regards

    #264426 Copied
    Avatar: sy2hello
    sy2hello
    Participant
    December 17, 2020 at 08:15

    Wouldnt this make it one product per row?

    #264430 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 17, 2020 at 08:37

    Yes, you can change the value of % depends on your needs.

    Regards

    #264436 Copied
    Avatar: sy2hello
    sy2hello
    Participant
    December 17, 2020 at 08:42

    I tried and changed it to 33% ( 3 products per row), the row still shows only 2 products.
    How do I fix this?
    Thanks in advance

    #264438 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 17, 2020 at 09:52

    Add this code also:

    .products-grid.row-count-4 .product:nth-child(2n+1) {
    clear: none !important;
}
.products-grid.row-count-4 .product:nth-child(3n+1) {
    clear: both;
}

    Regards

    #264464 Copied
    Avatar: sy2hello
    sy2hello
    Participant
    December 17, 2020 at 10:35

    thanks

    #264475 Copied
  • Viewing 7 results - 1 through 7 (of 7 total)

The issue related to '‘How to change category/product per row ONLY for mobile?’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Spa – WooCommerce Theme
lazy-placeholder
Hotel – WordPress Theme
lazy-placeholder
Bags Store – WooCommerce Theme
lazy-placeholder
Beaty & Cosmetics – WordPress WooCommerce Theme
lazy-placeholder
Gaming – WooCommerce Theme
lazy-placeholder
Cosmetics Store – WooCommerce Theme
lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Drinks Store – WordPress WooCommerce Theme
lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
WooPress Fullwidth

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.