2 products on mobile, 3 on tablet

Support
#1

Hello

I’m making some customization to how woocommerce products display on mobile / tablet devices.

I see that other people have asked how to make two columns for products on mobile, which is great.

The problem I have however is that the 2 columns display on all screen sizes up to 979px, even though I have the max width set to 480px.

What I would like to achieve is having two columns for screens under 480px, but three columns for 481px - 979px - are you able to help with this? I currently have the shop set to 4 columns for 980px and above and I really like that look.

Here is the code I have used for two columns on mobile, but I can’t figure out how to maintain this code and implement one which forces three columns for 481px - 979px screens.

@media screen and (max-width: 480px) {
  .woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
    width: 48% !important;
}
#2

Hi Callum,

Thank you for reaching out to us. To show three columns between 481px - 979px breakpoints, please add the following code as well in the Theme Options > CSS:

@media screen and (min-width: 481px) and (max-width: 979px) {
    .woocommerce .cols-4 li.product, 
    .woocommerce.columns-4 li.product {
        width: 30%
    }
    .woocommerce .cols-4 li.product:nth-child(2n+3),
    .woocommerce.columns-4 li.product:nth-child(2n+3) {
        margin-right: 0;
        clear: none;
    }
    .woocommerce .cols-4 li.product:nth-child(2n+2),
    .woocommerce.columns-4 li.product:nth-child(2n+2) {
        margin-right: 4%;
    }
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#3

Hi Nabeel

I have added the code, however there is some issues preventing it from displaying properly. I’ve taken two screenshots to show you what I mean. On the right the products are no longer aligned with the ‘showing all 20 results’ box and (more importantly) the products are not evenly spaced. On some lines a product will only display by itself, with no other products next to it. I have included the full code for you to take a look at:

@media screen and (max-width: 480px) {
  .woocommerce .cols-2 li.product, 
  .woocommerce .cols-3 li.product, 
  .woocommerce .cols-4 li.product, 
  .woocommerce.columns-2 li.product, 
  .woocommerce.columns-3 li.product, 
  .woocommerce.columns-4 li.product {
    width: 48%;
  }
}
  

@media screen and (min-width: 481px) and (max-width: 979px) {
    .woocommerce .cols-4 li.product, 
    .woocommerce.columns-4 li.product {
        width: 30%
    }
    .woocommerce .cols-4 li.product:nth-child(2n+3),
    .woocommerce.columns-4 li.product:nth-child(2n+3) {
        margin-right: 0;
        clear: none;
    }
    .woocommerce .cols-4 li.product:nth-child(2n+2),
    .woocommerce.columns-4 li.product:nth-child(2n+2) {
       margin-right: 4%;
    }
}

#4

I’m not sure if it would be an easier fix, but I know in the theme options for WooCommerce you can set shop columns to 3 by default. Do you think it would be possible to have this function enabled only when the screen is between 481 - 979px and then have it revert back to 4 columns for all other sizes?

#5

Hey Callum,

That would also require custom CSS, however you can fix the above using CSS Flexbox (see https://css-tricks.com/snippets/css/a-guide-to-flexbox/), try this code instead:

@media screen and (min-width: 481px) and (max-width: 979px) {
    .woocommerce .cols-4, 
    .woocommerce.columns-4 {
        display: flex;
        flex-wrap: wrap;
    }
    .woocommerce .cols-4 li.product, 
    .woocommerce.columns-4 li.product {
        width: 30%;
    }
    .woocommerce .cols-4 li.product:nth-child(2n+2),
    .woocommerce.columns-4 li.product:nth-child(2n+2) {
        margin-right: 4%;
    }
    .woocommerce .cols-4 li.product:nth-child(3n+3),
    .woocommerce.columns-4 li.product:nth-child(3n+3) {
        margin-right: 0;
    }

}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#6

Hi Nabeel

Thank you very much - that works great! I think it would be a great feature in a future release of pro to have the option to set the number columns displayed according to breakpoints for WooCommerce :slight_smile:

Just for the information of anyone else who wants to get the same result, I saw that at a width of 30% the boxes were still slightly misaligned with the product count. After some trial and error I found a width of 30.6% aligned everything perfectly. Here is the updated code below:

@media screen and (min-width: 481px) and (max-width: 979px) {
    .woocommerce .cols-4, 
    .woocommerce.columns-4 {
        display: flex;
        flex-wrap: wrap;
    }
    .woocommerce .cols-4 li.product, 
    .woocommerce.columns-4 li.product {
        width: 30.6%;
    }
    .woocommerce .cols-4 li.product:nth-child(2n+2),
    .woocommerce.columns-4 li.product:nth-child(2n+2) {
        margin-right: 4%;
    }
    .woocommerce .cols-4 li.product:nth-child(3n+3),
    .woocommerce.columns-4 li.product:nth-child(3n+3) {
        margin-right: 0;
    }

}
#7

Hi Callum,

Thank you for sharing your findings and correct values of the column width with other customers :slight_smile:.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.