我想在移动设备上用一列在产品类别页面上显示产品。但它显示 2 列,可能会导致外观问题 我在CSS代码下面尝试这样做,但它不起作用:
@media only screen and (max-width:460px) {
.woocommerce[class*=columns-] ul.products li.product {
width: 100%;
}
}
我想要的地方是那个;
http://www.e-tamirci.com/tamirci-bul/
谢谢你的帮助。
我根据答案找到了解决方案;
@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%;
}
}
谢谢。
这是在WooCommerce 3.6中对我有用的:
@media (max-width: 768px) {
.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product {
width: 100%;
}
}
你的问题是
@media (max-width: 768px)
.woocommerce ul.products li.col-3.product, .woocommerce-page ul.products li.col-3.product {
width: 48%;
}
所以把它改成
@media (max-width: 768px)
.woocommerce ul.products li.col-3.product, .woocommerce-page ul.products li.col-3.product {
width: 100%;
}
请尝试以下css。在这里,您错过了 col 中的 ",并且您使用了列而不是 col
@media only screen and (max-width:460px) {
.woocommerce[class*="col-"] ul.products li.product {
width: 100%;
}
}
这对
我有用。转到外观>自定义>其他 CSS 并添加以下内容:
@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;
}
}
这是Bootstrap 5的解决方案,当为任意数量的产品列设置WooCommerce时有效。
@include media-breakpoint-down(md) {
.woocommerce ul.products[class*=columns-] li.product,
.woocommerce-page ul.products[class*=columns-] li.product {
width: 100%;
}}