css - 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，他们建议在响应式 View 中并排使用的 CSS 代码似乎没有什么不同，不如上面的代码。

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

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

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/