Shop page on mobile one column only

[marketingman]

Hi Support;

I need help on making column for mobile and tablet. right now my tablet view is displaying 2 columns which I want it to display as 3 column. while mobile will display single column only. how can I do this? right now its not mobile ready you can check the site here http://www.igrowsystems.com/shop/. I already adjusted the max-width to 100% and li width to 22% for desktop view.

[Joao]

Hi There,

Please replace the code you have added with:

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

@media(min-width: 481px) and (max-width: 969px) {
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
    width: 30% !important;
}}

@media(min-width: 970px){
.woocommerce .cols-4 li.product, .woocommerce.columns-4 li.product {
    width: 22% !important;
}}

Hope it helps!