【问题标题】:How to show 2 products per column on mobile view in Woocommerce?如何在 Woocommerce 的移动视图中每列显示 2 个产品?
【发布时间】:2018-03-28 00:49:26
【问题描述】:

我在智能手机视图中每列显示 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 有什么问题?

【问题讨论】:

    标签: css wordpress woocommerce smartphone


    【解决方案1】:

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

    也就是说,在您的 DHVC Woocommerce 产品布局中应该有一个选项,无论是在设置页面中,还是在控制类似布局选项的 JavaScript 本身中。

    编辑:根据插件页面,Grid 布局选项而不是 Masonry 可能会更好:https://codecanyon.net/item/woocommerce-products-layouts/7384574#item-description__features

    目前,您的 CSS 未生效的原因是因为您将 DHVC 设置为使用 Masonry 布局,该布局将每个元素设置为 position: absolute 并进行调整topleft 值相应,所以 display: inline-blockfloat: 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;
        }
    }
    

    【讨论】:

    • 没有办法让它像我想要的那样?我是通过 CSS 吗?
    • 您阅读答案了吗?这是一个高级插件,所以我无法为您提供选项,但我确信其中有一个选项可以调整您想要的内容。仅使用 CSS 来修复它会是一个 hack,因为您将需要过于复杂的选择器,而 Masonry 使用绝对定位和基于像素的高度,这使得使用 CSS “撤消”它非常乏味。我已经更新了对 CSS 解决方案的破解的答案 - 请在使用之前查看选项或联系 DHVC 插件开发人员。
    猜你喜欢
    • 1970-01-01
    • 2021-06-26
    • 1970-01-01
    • 2015-12-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-17
    • 2012-09-02
    相关资源
    最近更新 更多