修复WooCommerce Shop页面行

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

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

如果你在计算机屏幕上打开网站, 只需缩小浏览器窗口, 你将看到它)

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

我认为你应该将保证金权利设置为10

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

.theme__product__item--col__3 {`

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

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

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