移动设备上的一列而不是两列

Question

我想在移动设备上以一栏显示产品类别页面上的产品。但它显示了 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%;
 }

}

谢谢。

Answer 1

你的问题是

@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%;
}

Answer 2

请尝试以下操作css.Here您在 col 中遗漏了 "" 并且您使用的是列而不是 col

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

Answer 3

这就是我在 WooCommerce 3.6 中的作用：

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

Answer 4

这对我有用。转到外观 > 自定义 > 其他 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;
    }
}

移动设备上的一列而不是两列

One column on mobile instead of two columns

css

wordpress

mobile

woocommerce

responsive