Reputation: 15
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.
Upvotes: 0
Views: 5528
Reputation: 4243
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%;
}}
Upvotes: 0
Reputation: 123
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;
}
}
Upvotes: 0
Reputation: 271
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%;
}
}
Upvotes: 1
Reputation: 1
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%;
}
}
Upvotes: 0
Reputation: 763
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%;
}
Upvotes: 0