css - 自定义宽度时 Woocommerce 产品布局问题

Question

我正在使用 Wordpress 插件“Woocommerce”。

我不满意我的产品的标准四栏布局意味着当浏览器宽度变窄时它们都变得太小，所以我尝试使用媒体查询将它们变成三栏浏览器达到 -1250px 时的布局。

插件使用的 margin css 存在一些问题，因为它预设为除最后一个产品外的所有产品都具有 margin-right。我已经通过使用

将其更改为针对第三项而不是第四项

.woocommerce-page ul.products li.product:nth-child(3n+3) {
右边距:0px；
}

然后我通过添加右边距修复了第四个，给它默认的边距值 margin: 0 3.8% 2.992em 0; 最初由插件设置。

但出于某种原因，第三个之后的元素到处都是，我不确定为什么。

任何人都可以告诉我可能导致此问题的原因以及如何解决它吗？

显示此问题的示例页面是:http://www.lucieaverillphotography.co.uk/product-category/prints/

Answer 1

这件事发生在我身上。如果您查看 css，woocommerce 会将“last”类分配给一行中的最后一项(或 li)，并将“first”分配给第一项。

当您调整窗口大小时并更改为 3 项结构时，最后一项变为第一项。

您需要以这些类为目标，可能会在特定断点处或完全删除它们的属性。您可以先尝试删除 .first 和 .last 的 clear 属性。