移动设备上的 Woocommerce 产品页面 - "you may also like" 错误地堆叠在一列中

Question

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

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

... 并向下滚动到“您可能还喜欢”部分，您会看到它没有像应该的那样排成两行。它在一列中，在堆叠中每个项目的一侧下方有一个大的白色 space，显然应该放置其他产品。

当此部分在移动设备上堆叠时，代码是什么使两个产品并排显示（两行）？天底下什么都试过了就是不配合！

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

Answer 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 规则

移动设备上的 Woocommerce 产品页面 - "you may also like" 错误地堆叠在一列中

Woocommerce product page on mobile - "you may also like" stacking in one column wrongly

css

wordpress

mobile

woocommerce