修复 WooCommerce 商店页面行

Question

在横屏模式的平板电脑和手机上，我的商店页面并未显示所有产品。它们会留下空隙，因此有时连续有两种产品，有时只有一种产品。我尝试了 CSS，但找不到解决方案。我的目标是让它们彼此相邻，并在纵向手机上至少连续显示 2 个，而不是一个。我该怎么做？

如果您在电脑屏幕上打开网站，只需将浏览器window调小即可看到）

Answer 1

我认为这可以解决问题。将 margin-right 设置为 0

 @media (max-width: 992px) and (min-width: 768px)
 {
   .theme__product__item--col__3:nth-child(3n) {
      margin-right: 0;
    }
 }

Answer 2

您将产品宽度设置为 50% + 边距。这不仅仅是屏幕的宽度。在横向上你有这个

@media (max-width: 767px) and (min-width: 560px)
    .theme__product__item--col__3:nth-child(3n) {
        margin-right: 15px;
}

将其更改为 0px

或将 50% 更改为较低的值。例如 46%。

@media (max-width: 767px) and (min-width: 560px)
.theme__product__item--col__3 {
    width: calc(50% - 7.5px);        
}

Answer 3

我认为你应该将 margin-right 设置为 10

@media (max-width: 767px) and (min-width: 560px)

.theme__product__item--col__3 {`

    width: calc(45% - 7.5px);        
}

Fix WooCommerce Shop page rows