如何使 Woocommerce 购物车表响应式？

Question

我正在与 WooCommerce 合作，我正在尝试设计一个列出购物车页面上所有产品的表格，以便它具有响应能力。然而，我不断遇到问题，现在我已经被困了几个小时试图找出问题所在。我无法为那里的任何东西设置宽度。就像所有

td

周围都有魔法填充，因此我无法为桌子设置

max-width: 100%;

。

这是问题的链接（可能您必须将产品添加到购物篮才能看到问题）

感谢任何帮助:)

Answer 1

对于在 Woocommerce 上遇到相同问题（购物车页表没有响应）的任何人，这就是我修复它的方法：

.woocommerce table.cart th,
.woocommerce table.cart td,
.woocommerce #content table.cart th,
.woocommerce #content table.cart td,
.woocommerce-page table.cart th,
.woocommerce-page table.cart td,
.woocommerce-page #content table.cart th,
.woocommerce-page #content table.cart td,
.woocommerce table.shop_table th,
.woocommerce-page table.shop_table th,
.woocommerce table.shop_table td,
.woocommerce-page table.shop_table td {
    min-width: 30px;
}

由于某种我不太明白的原因，所有表格标题和表格数据都需要有一个

min-width

。

Answer 2

这适用于 384px 及以上的视口，但似乎不适用于低于该视口的视口。我添加了最大宽度：49px；低至 360px，然后 max-width: 39px；对于 320px 视口。希望对某人有帮助。

感谢您所做的工作！

Answer 3

我无法更改我的 WordPress 主题，当人们通过移动设备查看购物车页面时，您无法看到图像。它看起来更像是一个列表。我尝试过插件、CSS 编码。我就是想不通..