Css 如何在Woocommerce的移动视图中每列显示2个产品？

我对在smartphone视图中每列显示2种产品有意见。我尝试使用CSS来定制外观，但现在它将所有产品显示在一行中。去购物

im使用Visual Composer和DHVC Woocommerce产品布局 为了得到那种表情。目前的情况是这样的：

我想这样做：

我的CSS有什么问题？

仅供参考，您的第一个“单列”媒体查询是

767px

宽，而不是

480px

也就是说，在DHVC Woocommerce产品布局的某个地方应该有一个选项，可以是设置页面，也可以是控制布局选项的JavaScript本身

编辑：根据插件页面，使用

Grid

layout选项，而不是砖石结构，您可能会更幸运：

目前，CSS未生效的原因是因为DHVC设置为使用砌石布局，该布局将每个元素设置为

位置：绝对

，并相应地调整

顶部

和

左侧

值，因此

显示：内联块

，

浮动：左侧

和类似的假专栏技巧不起作用

如果在DHVC设置或JavaScript中找不到该选项，则需要将其提交给插件开发人员以获得进一步帮助

编辑：就像我说的，我几乎可以保证你要找的选项在DHVC选项中。使用砌石选项使得“通过CSS使它像你想要的那样”更像是一种黑客行为，而且更丑陋

---

如果您坚持只使用CSS（尽管在

/wp admin/

设置页面中确实有更改行为的选项，并且开发人员提供高级支持），那么您需要删除父容器上的高度砌体集，并覆盖项目上的内联样式。像这样的事情会让你开始没有办法让它像我想要的？我是通过CSS认识的？你看过答案了吗？这是一个高级插件，所以我不能帮你的选择，但我相信有一个选项在那里调整你想要的。仅使用CSS来修复它将是一个难题，因为您需要过于复杂的选择器，

massy

使用绝对定位和基于像素的高度，这使得使用CSS来“撤销”它非常乏味。我已经更新了一个CSS解决方案破解的答案-请在使用之前查看选项或联系DHVC插件开发人员。

@media (max-width: 480px)  {

#dhvc_woo_fc7928715c .dhvc-woo-masonry-list .dhvc-woo-masonry-item {
 float: left;
  width: 50%;
 }
}