Woocommerce - изображения товаров скрыты на маленьких экранах
Я только что заметил после обновления Woocommerce, что изображение продукта скрыто на маленьких экранах.
Я вижу, что это установлено в файле woocommerce-smallscreen.css, но можно ли переопределить это в пользовательском CSS темы? Похоже, мне нужно избавиться от поплавка: 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 { float: нет; ширина: 100%;
Если я распаковываю float: none; в Chrome Inspector я вижу фото продукта. Я попытался удалить его из css-файла WooCommerce, но это не помогло.
Вот что я вижу, если выбираю "проверить элемент" в 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 {float: none; ширина: 100%;
Если я распаковываю float: none; в Chrome Inspector я вижу фото продукта. Я попытался удалить его из css-файла WooCommerce, но это не помогло.
Я бы не предлагал удалять это, поскольку это затрагивает несколько элементов. Без подробного кода режима (html, css, javascript - или, может быть, самого веб-сайта) нелегко дать вам правильное решение ...
Извините за недостаток информации, я все еще пытаюсь понять, как это работает;) Пример url: ссылка на сайт
Ответы 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;
}
попробуйте дать более подробную информацию, дать немного кода - людям будет легче помочь. тем временем, постарайтесь уточнить свой собственный css developer.mozilla.org/en-US/docs/Web/CSS/Specificity