如何在 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 布局选项而不是 Masonry 可能会更好：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 让它像你想要的那样”更像是一种 hack 和恕我直言，丑陋。

如果您坚持只使用 CSS（尽管在/wp-admin/ 设置页面中肯定有更改行为的选项，并且开发人员提供高级支持）-​​ 您需要删除父容器上 Masonry 设置的高度，并覆盖项目上的内联样式。像这样的东西会让你开始?......再次请考虑使用内置选项或在使用之前询问插件开发人员，这可能会导致你或该网站的下一个负责人稍后相当头痛。

@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;
    }
}