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 you miss out＆＃34;＆＃34;在col和u中使用了列而不是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%;
    }
}

移动而不是两列的一列

3 个答案: