时间戳

首页 > 解决方案 > woocommerce 相关产品 2 列移动问题

css - woocommerce 相关产品 2 列移动问题

问题描述

大家早，

我似乎无法让我的 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 代码似乎没有什么不同，不如上面的代码。

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

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

标签： csswordpresswoocommercemultiple-columns

解决方案

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

推荐阅读