One column on mobile instead of two columns

Question

I want to show products on product category pages in one column when mobile. But it shows 2 columns and it may cause apperance problems I tried below CSS code to do that but it did not work:

@media only screen and (max-width:460px) {
.woocommerce[class*=columns-] ul.products li.product {
   width: 100%;
 }
}

Where I want is that;

http://www.e-tamirci.com/tamirci-bul/

Thank you for your helps.

I have found the solution based on answers;

@media all and (max-width:768px){
.woocommerce ul.products li.col-3.product,
.woocommerce-page ul.products li.col-3.product{
    width: 98%;
    margin:1%;
 }

}

Thank you.

score 1 · Answer 1 · answered Oct 17 '19 at 19:46

1

This is what worked for me in WooCommerce 3.6:

@media (max-width: 768px) {
    .woocommerce ul.products[class*=columns-] li.product,
    .woocommerce-page ul.products[class*=columns-] li.product {
        width: 100%;
    }
}

answered Oct 17 '19 at 19:46

Eric

251
2
8

score 0 · Accepted Answer · answered Apr 28 '16 at 12:24

0

Your problem is

@media (max-width: 768px)
.woocommerce ul.products li.col-3.product, .woocommerce-page ul.products li.col-3.product {
    width: 48%;
}

so change it to

@media (max-width: 768px)
.woocommerce ul.products li.col-3.product, .woocommerce-page ul.products li.col-3.product {
    width: 100%;
}

answered Apr 28 '16 at 12:24

Giacomo Torricelli

764
1
6
21

Try to clear your cache because it works :) Otherwise put width: 100% !important; – Giacomo Torricelli Apr 28 '16 at 12:58
I have done that and still same, even I tried it on google mobility check and it is same there also. – B.Koc Apr 28 '16 at 13:22

score 0 · Answer 3 · answered Apr 28 '16 at 12:44

0

Please try the following css.Here you missed out "" in col and u used columns instead of col

@media only screen and (max-width:460px) {
.woocommerce[class*="col-"] ul.products li.product {
   width: 100%;
 }
}

answered Apr 28 '16 at 12:44

Tanushree Behera

1
3

Thank you, but nothing changed. – B.Koc Apr 28 '16 at 13:23

score 0 · Answer 4 · answered Aug 30 '21 at 19:49

This worked for me. Go to a Appearance > Customize > Additional CSS and add this:

@media (max-width: 767px) {
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-1 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-2 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-3 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-4 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-5 li.product, 
 body.et-db #et-boc .et-l .et_pb_shop ul.products.columns-6 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-1 li.product,  
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-2 li.product,  
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-3 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-4 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-5 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_related_products ul.products.columns-6 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-1 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-2 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-3 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-4 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-5 li.product, 
 body.et-db #et-boc .et-l .et_pb_wc_upsells ul.products.columns-6 li.product {
        width: 100%!important;
        margin-right: 0%!important;
    }
}


@media all and (max-width: 767px) {
     .woocommerce-page ul.products li.product:nth-child(n) {
        margin: 0 0 11.5%!important;
        width: 100%!important;
    }
}

Using important this way is evil. Why? See https://stackoverflow.com/a/3706876/4218046 for more info. — Fabian S., Aug 31 '21 at 13:33

score 0 · Answer 5 · answered Jul 14 '22 at 05:42

Here is a solution for Bootstrap 5 that works when WooCommerce is setup for any number of product columns.

@include media-breakpoint-down(md) {

.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product {
    width: 100%;
}}

One column on mobile instead of two columns

5 Answers5