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

Question

我在智能手机视图中显示每列显示2个产品的问题。我尝试使用这个CSS来自定义外观，但它现在将所有产品显示为一行。 URL购物。

@media (max-width: 480px)  {

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

即时通讯使用Visual Composer和DHVC Woocommerce产品布局  得到那个样子。目前显示如下：

并希望这样做：

我的CSS有什么问题？

Answer 1

仅供参考，您的第一个“单列”媒体查询为767px宽，而不是480px。

也就是说，您的DHVC Woocommerce产品布局中应该有一个选项，可以在设置页面中，也可以在JavaScript中控制布局选项。

编辑：根据插件页面，您可能会更好地使用Grid布局选项而不是砌体：https://codecanyon.net/item/woocommerce-products-layouts/7384574#item-description__features

目前，您的CSS未生效的原因是因为您已将DHVC设置为使用 Masonry 布局，该布局将每个元素设置为position: absolute并相应地调整top和left值，因此display: inline-block，float: left;和类似的虚拟列技巧将无效。

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

编辑：就像我说的，我几乎可以保证您正在寻找的选项是DHVC选项。使用Masonry选项使得“通过CSS制作它就像你想要的”更多的是黑客和imho，丑陋。

如果您坚持关于仅使用CSS（尽管可以选择更改/wp-admin/设置页面中的行为，并且开发人员提供高级支持） - 您将会需要删除父容器上的高度砌体设置，并覆盖项目上的内联样式。这样的事情会让你开始......再次请考虑使用内置选项或在使用之前询问插件开发人员，这可能会导致您或下一个负责该网站的人员后来非常头疼。< / p>

@media (max-width: 767px){
    /* Masonry sets an absolute defined px based height, overwrite that */
    .dhvc-woo-row-fluid.dhvc-woo-masonry-list {
        height: auto !important;
    }

    /* Masonry sets absolute, top, and left, overwrite those
       as well as setting them to have a small gutter */
    .dhvc-woo-item.dhvc-woo-masonry-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 50%;
        width: calc( 50% - 10px );
        float: left;
    }

    /* Scooch every second item over 10px */
    .dhvc-woo-item.dhvc-woo-masonry-item:nth-child(2n) {
        margin-left: 10px;
    }
}