css - 修复 WooCommerce 商店页面行

Question

在我的平板电脑和手机横向模式的商店页面上，并非所有产品都彼此相邻显示。它们会留下空隙，因此有时会出现两种产品，有时会连续出现一种产品。我尝试使用 CSS 并找不到解决方案。我的目标是让它们彼此相邻，并在纵向手机上连续显示至少 2 个，而不是一个。我怎样才能做到这一点？

这是我的网站：https ://malimo.co/shop/

如果您在计算机屏幕上打开网站，只需将浏览器窗口缩小即可看到它）

Answer 1

您将产品宽度设置为 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 2

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

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

.theme__product__item--col__3 {`

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

Answer 3

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

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