WooCommerce移动端相关产品两列布局问题求助

Hey Ryan, 我来帮你搞定这个移动端相关产品的布局问题！你之前的代码只调整了容器的宽度，没处理里面产品列表的布局逻辑，所以才会出现“缩了宽度但还是单列、标题跑偏”的情况。下面是针对性的解决方案，完全不会影响你满意的桌面版显示：

正确的CSS代码 #

把这段代码添加到你的主题自定义CSS区域（或者子主题的style.css文件里）：

@media screen and (max-width: 767px) {
  /* 修复标题居中，确保容器占满移动端宽度 */
  .woocommerce .related.products {
    width: 100% !important;
    text-align: center !important;
  }

  /* 给产品列表启用弹性布局，让产品自动换行排列 */
  .woocommerce .related.products ul.products {
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    padding-left: 0;
  }

  /* 设置每个产品项占50%宽度，同时留出左右间距避免拥挤 */
  .woocommerce .related.products ul.products li.product {
    width: calc(50% - 10px) !important;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 20px;
    float: none; /* 清除默认浮动，避免布局冲突 */
  }
}

代码说明 #

• 首先重置了.related.products容器的样式，确保它占满移动端宽度，同时把标题恢复为居中对齐；
• 给产品列表ul.products添加了flex布局，这是实现响应式两列的核心，flex-wrap: wrap会让产品在空间不足时自动换行；
• 用calc(50% - 10px)设置每个产品的宽度，减去的10px是用来分配左右5px的间距，避免两个产品挤在一起超出屏幕；
• 清除了产品项默认的float，防止和flex布局冲突。

如果你的主题本身有产品间距的样式，可以根据实际情况调整margin的数值，比如把10px改成更适合的间距大小。

内容的提问来源于stack exchange，提问作者nobbyrn