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

Question

大家早上好，

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

上查看时

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

有人可以帮助我实现这一目标吗？

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

@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/

woocommerce related products 2 column issues for mobile