Woo-commerce：移动设备上的 2 列产品间距不正确

Question

我正在开发一个 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

我该如何解决这个问题？

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