修复WooCommerce Shop页面行

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