【问题标题】:Woo-commerce: 2 columns products on mobile is not spaced properlyWoo-commerce:移动设备上的 2 列产品间距不正确
【发布时间】:2023-03-17 04:59:02
【问题描述】:

我正在开发一个 woo-commerce 网站,我正在使用 oceanwp 主题。 我试图让手机上的商店显示为两列产品。 我试过这段代码。

@media screen and (max-width: 480px) {
  .woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
    width: 48% !important;
  }
}

它有效,但有些页面在产品之间有间距(见下图) enter image description here

我该如何解决这个问题?

【问题讨论】:

    标签: wordpress woocommerce


    【解决方案1】:

    试试这个:

    @media screen and (max-width: 480px) {
      .woocommerce .cols-2 li.product, .woocommerce .cols-3 li.product, .woocommerce .cols-4 li.product, .woocommerce.columns-2 li.product, .woocommerce.columns-3 li.product, .woocommerce.columns-4 li.product {
        width: 47% !important;
        float:left!important;
        min-height:295px;
      }
    }
    

    【讨论】:

    • 你能在这里给我网址吗?
    • 当然。 www.krtc.store
    • 其实问题出现在三个页面。主页和krtc.store/shop/new-in-stock和本页krtc.store/shop/featured-products
    • 尝试添加min-height,就像我在上面的代码中添加的那样
    • 嘿,如果我的回答解决了您的问题,请投票并接受我的回答
    猜你喜欢
    • 2014-11-16
    • 1970-01-01
    • 2014-10-17
    • 2020-10-19
    • 1970-01-01
    • 1970-01-01
    • 2017-12-09
    • 1970-01-01
    • 2020-08-18
    相关资源
    最近更新 更多