时间戳

首页 > 解决方案 > Woocommerce - 隐藏在小屏幕上的产品图片

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

问题描述

我只是在 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-page div .product div.images，.woocommerce-page div.product div.summary { 浮动：无；宽度：100%；

如果我拆箱浮动：无；在 chrome 检查器中，我可以看到产品照片。我试图从 WooCommerce css-file 中删除它，但这没有帮助。

标签： csswordpresswoocommerce

解决方案

尝试添加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;
}

推荐阅读