如何在移动设备的两列中显示Woocommerce相关产品

Question

仅针对移动设备，我尝试在2列而不是1列中显示"相关产品"。

到目前为止，我已经尝试了以下代码片段，它似乎为另一列创建了空间，但产品只出现在左列。右边是空的。

@media screen and (max-width: 767px){
.related.products ul.products li.product {
flex: 0 1 auto;
width: 40%;
}
}

只是重申一下，这个问题是关于移动的。如果你减少屏幕宽度，你可以看到上面的CSS将推荐的产品压缩到左边，但没有堆叠在两列中。

感谢您的帮助。

注意，如果有帮助的话，我也会使用BeaverBuilder(类似于Elementor(，但我认为这不会对所需的CSS产生任何影响。

Answer 1

以下代码应该可以工作：

@media screen and (max-width: 767px){
.woo_rel .related.products ul.products{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
grid-gap: 0;
}
.woo_rel .related.products ul.products li.product{
width: calc(50% - 10px);
}
} 

Answer 2

我不确定该部分使用的特定主题的代码或类如何，但我只会将其设置为50%的宽度。

@media screen and (max-width: 767px){
.related.products ul.products li.product {
width: 50%;
}
}