Question

Woocommerce更新后，我刚发现产品图像隐藏在小屏幕上。

我可以看到它是在文件woocommerce-smallscreen.css中设置的，但是可以在主题自定义CSS中覆盖它吗？似乎我需要摆脱float：none; 如果我在文件woocommerce-smallscreen.css中执行此操作，我估计下次更新WooCommerce时它将被覆盖。

我尝试过，但是我不确定我是否正确使用了自定义CSS。

这就是我在chrome中选择“检查元素”的情况：media =“ only screen and（max-width：768px）” .woocommerce #content div.product div.images，.woocommerce #content div.product div.summary，.woocommerce div.product div.images，.woocommerce div.product div.summary，.woocommerce-page #content div.product div.images，.woocommerce-page #content div.product div.summary，.woocommerce -页div.product div.images，.woocommerce-页div.product div.summary { 浮动：无；宽度：100％；

如果我取消选择float：none;在chrome inspector中，我可以看到产品照片。我试图将其从WooCommerce css文件中删除，但这没有帮助。

Answer 1

尝试将float:left添加到包含图像的元素

.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
    float: left;
}

如果它不起作用，请尝试添加!important规则

.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
    float: left !important;
}

Woocommerce-隐藏在小屏幕上的产品图片

1 个答案: