How to get more columns for products on mobile?

[nickmann]

Hey, when on mobile, my products are 1 column and 6 rows. How can I make this 3 columns and 2 rows?

[Kyle – SUPPORT]

Hi

You want 3 columns on mobile? The products will be very small

– Kyle

[nickmann]

Yes! I would like to do some testing, so I’ll find out if the size is an issue. Thank you!

[Kyle – SUPPORT]

Add this to your custom css:

@media only screen and (max-width: 767px) { 
.woocommerce ul.products li.product.col-sm-4 {
  width: 33.3333%!important;
}
}

– Kyle

[nickmann]

Hi Kyle, it looks like your code didn’t do anything. I just want to make sure I did it correctly by copied/pasted it in the Custom CSS section of the theme options.

[Kyle – SUPPORT]

What’s your link? I’ll check

– Kyle

[nickmann]

This reply has been marked as private.

[Kyle – SUPPORT]

Try this:

@media only screen and (max-width: 767px) { 
.woocommerce ul.products li.product.col-sm-3 {
  width: 33.3%!important;
}
}

– Kyle

[nickmann]

It works! thank you!

[Kyle – SUPPORT]

No problem 🙂