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