Question

我的问题网页：http://doubleknityarn.com.hk/home-shop-style-3/

对于移动设备（例如Samgsung S4），我想在移动响应式设计中每行安排2个产品，而不是每行1个产品。我已经创建了一个儿童主题，但我无法弄清楚我的代码有什么不对，我不能每行2个产品。

以下是我的孩子style.css的CSS代码：

@media screen and (max-width: 651px) { 
    .woocommerce ul.products li.product,.woocommerce-page ul.products li.product{ 
        clear: both; 
        float:left; 
        margin:0 0 1em 0; 
        padding:0; 
        position:left; 
        width:46%; 
        margin-left:-20;
    } 
}

任何人都可以提供帮助？非常感谢。

Answer 1

您的正确代码应该是这样的

@media (max-width:651px) {

ul.products li.product {
width: 45%;
margin: 0 0 1em 0;
padding: 0;
}


.products li, #main .products li:nth-child(3n),
#main .products li:nth-child(4n) {
float: left!important;
margin-left: 10px !important;
margin-right: 10px !important;
}

}

Answer 2

如前所述，您的网站主题使用的是非常脏的CSS，您必须尽快解决。目前，您可以按照我的建议。

首先下载此文件wp-content/avada/css/media.css，然后将我在此link中创建的所有代码复制粘贴到media.css中并进行更新。

Answer 3

虽然我已经解决了小屏幕问题，但我发现了另一个问题：

我发现我的iPad垂直（768 X 0124）现在在同一页面上没有响应： http://doubleknityarn.com.hk/home-shop-style-3/

这里有什么建议吗？

响应式产品展示

3 个答案: