woocommerce 相关产品 2 移动版专栏问题

Question

早上好，

我似乎无法让我的 Woocommerce 相关产品以 2 列并排格式显示。在移动设备

上查看时

您会在此页面上看到相关产品是一个接一个，ID 像 2 并排在新的一行开始之前。 https://ruggedasylum.com/product/solo-smoke-free-fire-pit/

有人可以帮我解决这个问题吗？

到目前为止，我已经尝试过了，但它只会变得更小，并继续在每条线上放置 1 个产品。它还将“相关产品”标题移到左侧而不是居中。

@media screen and (max-width: 767px){
.woocommerce .related.products {
width: 50% !important;
}}

我参加了 W3 Schools，他们建议在响应式视图中并排使用的 CSS 代码似乎没有什么不同，不如上面的代码。

请注意，我对当前在桌面版页面上的显示方式感到满意。

我期待您的意见，非常感谢 Ryan :)

Answer 1

---

  @media screen and (max-width: 767px){

   .related.products ul.products li.product {
    flex: 0 1 auto;
    width: 45%;

  }
}

这应该可以解决问题，但您可能需要调整 % 更多关于 flexbox 的信息，你可以访问https://css-tricks.com/snippets/css/a-guide-to-flexbox/