如何消除 WooCommerce Shop 中产品类别之间的差距？

Question

我最近开始定制一个网站，但有一个问题不知道如何解决。

在我的URL上的商店页面中

当尝试从智能手机打开时，顶部和产品类别之间的差距太大，我看到：

我尝试自己使用这个 CSS 来消除这个差距：

  .woocommerce ul.products li.product, .woocommerce-page ul.products 
li.product {
            min-height: 420px !important;
        }

但是好像也影响到Product Archives页面，弄得不好看。如何为移动设备添加 CSS 来解决这个问题？提前致谢。

Answer 1

我发现使用以下样式：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    margin-bottom: -100px;
}
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
min-height: 490px !important;
margin-bottom: 0px;

}

您应该删除 min-height 和 ma​​rgin-bottom 以解决产品中的高度问题。在产品部分上方您有 header-content 和 wrapper-content 填充，请根据您的屏幕尺寸进行更改。

希望这行得通。

Answer 2

对于这个问题，我有两个答案，你可以做任何你想做的事，这取决于你。

1. 移除最小高度 490px

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

min-height: 490px !important;

margin-bottom: 0px;

}

和

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

margin-bottom: -170px!important;

}

这个来自 css

其次，请将 css 添加到您编写 css 的页面中，就像您编写 css 时一样 http://prntscr.com/faq33h。

@media（最大宽度：480px）{

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

    min-height: 425px !important;

    margin-bottom: 0px;

}

}

@media（最大宽度：375px）{

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

    min-height: 400px !important;

    margin-bottom: 0px;

}

} @media（最大宽度：375px）{

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {

    min-height: 365px !important;

    margin-bottom: 0px;

}

}

如果您有任何问题，请告诉我。