我的问题网页:http://doubleknityarn.com.hk/home-shop-style-3/
对于移动设备(例如 Samgsung S4),我想在移动响应式设计中每行排列 2 个产品,而不是每行 1 个产品。 我创建了一个子主题,但我无法弄清楚我的法典有什么问题,我不能每行制作 2 个产品。
下面是我的 child 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;
}
}
有人可以帮忙吗?非常感谢。
最佳答案
你的正确代码应该是这样的
@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;
}
}
关于css - 响应式产品展示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28954544/