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

Question

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

在我的URL

的商店页面中

当尝试从智能手机打开时，顶部与产品类别之间存在太大差距，我看到了这一点：

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

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

但似乎也会影响产品档案页面，让人看起来很糟糕。如何添加移动设备的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 和 margin-bottom 来修复产品中的高度问题。在产品部分上方，您使用标题内容和包装内容进行填充，请根据您的屏幕尺寸进行更改。

希望工作。

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（max-width：480px）{

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

    min-height: 425px !important;

    margin-bottom: 0px;

}

}

@media（max-width：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;

}

}

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