Woocommerce Shop Responsive Columns for Tablet Size

Support
#1

Hello There!

I have four product columns on my woocommerce shop page.

I am trying to achieve 3 columns on tablets and 2 columns on mobile. Below is the code.
I am only ever able to get 2 columns on a tablet and 1 on mobile.

Please let me know if I am missing anything!
Thanks!

@media(max-width: 480px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}}
@media(min-width: 481px) and (max-width: 767px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
width: 29% !important;
}}
@media(min-width: 768px) and (max-width: 979px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
width: 22% !important;
}}

#2

I am all set, I no longer need help.
I actually was able to it figure out from a couple answers on this forum and some experimenting.

Here is what worked for me:

/change the amount of columns on the shop page for screen sizes/
@media(max-width:480px){
.entry-wrap ul.products li{
width: 48% !important;
}}
@media(max-width: 480px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
width: 48% !important;
}}
@media(min-width: 481px) and (max-width: 767px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
width: 29% !important;
}}
@media(min-width: 768px) and (max-width: 979px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
width: 22% !important;
}}
@media (max-width: 979px) and (min-width: 690px){
.woocommerce li.product.first {
clear: both!important;
}
.woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
width: 22% !important;
}
.woocommerce .cols-3 li.product:nth-child(2n+2), .woocommerce .cols-4 li.product:nth-child(2n+2), .woocommerce.columns-3 li.product:nth-child(2n+2), .woocommerce.columns-4 li.product:nth-child(2n+2) {
margin-right: 4%;
}
.woocommerce .cols-3 li.product:nth-child(2n+3), .woocommerce .cols-4 li.product:nth-child(2n+3), .woocommerce.columns-3 li.product:nth-child(2n+3), .woocommerce.columns-4 li.product:nth-child(2n+3) {
clear: none;
}
.woocommerce li.product.last {
margin-right: 0!important;
}
}

#3

We’re glad you’ve sorted it out and thank you for sharing the solution with us.

Cheers!

#4

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