移动设备上的 Woocommerce 产品页面 - “您可能也喜欢”错误地堆叠在一列中

Posted 2023-03-06

【中文标题】移动设备上的 Woocommerce 产品页面 - “您可能也喜欢”错误地堆叠在一列中

【英文标题】：Woocommerce product page on mobile - "you may also like" stacking in one column wrongly

【发布时间】：2021-04-29 12:03:23

【问题描述】：

如果您在移动设备上查看我们的产品页面...

https://www.charliecustards.co.uk/product/the-charlie-montreux-brogue-chelsea-boot-in-autumn-calf-leather/

...并向下滚动到“您可能也喜欢”部分，您会看到它不在两个产品的行中，因为它应该是。它在一列中堆叠在一起，堆叠中每个项目的侧面下方都有一个很大的空白区域，显然应该放置其他产品。

当此部分在移动设备上堆叠时，它显示两个产品彼此相邻（两行）的代码是什么？天底下什么都试过了，都无法配合！

另请参阅清楚显示问题的屏幕截图。非常感谢大家！

【参考方案1】：

你目前有这个代码：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce[class*=columns-] ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product 
    float: none!important;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    text-align: center;
    width: auto;

您必须将其更改为：

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product, .woocommerce .related ul.products li.product, .woocommerce-page .related ul.products li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce[class*=columns-] ul.products li.product, .woocommerce-page[class*=columns-] ul.products li.product 
    float: none;
    margin-left: auto;
    margin-right: auto;
    max-width: 280px;
    text-align: center;
    width: auto;

您必须从 float 属性中删除 !important 规则。

【讨论】：

您好，感谢您的回复和帮助。我将该代码放在附加的 CSS 中，不幸的是它没有改变？还是一样。

如果您使用的是缓存插件，请清除缓存。

您好，谢谢您，我通过我们的缓存插件清除了网站缓存，但在移动设备上仍未更改？感谢您到目前为止的帮助，真的很感激。 :)

您是否检查过以下之后没有其他规则覆盖它？删除当前规则并将其添加到 css 文件的末尾。它必须工作。或者，您可以完全删除 float: none; 行。

谢谢你按你说的那样工作。我通过直接从主题编辑器中的 woocomerce css 文件中删除 !important 来使其工作，而不是尝试从自定义 css 中删除。一旦我将它直接从主题编辑器中的代码中取出，它就可以工作。谢谢你。我如何给你一个积极的评价！？ :)