Intereting Posts
Как подавить код статуса 404 на странице WordPress? Создание шаблонных страниц или плагина из темы Отображать функцию пользовательских сообщений ТОЛЬКО, если она имеет значение Создайте подстраницу администрирования, содержащую сообщения в определенной категории Изменение заголовка страницы при заполнении сообщений как переместить блог wordpress на мой статический сайт шаблоны пользовательских страниц в WordPress Как выполнить простой PHP-скрипт в WP (я не думаю, что здесь применяется wp_enque_script) $ wpdb-> вставить Ошибка базы данных Дублировать запись журнала входа Разрешение коротких кодов внутри атрибутов Порядок по категориям и публикация в пользовательском запросе WP Как я могу исключить все комментарии в модерации? Facebook социальный издатель и пользовательские поля типа сообщения Изменить порядок сообщений pdf (25MB) – как отображать и включать загрузку?

Помощь при изменении размера изображений на главной странице WooCommerce

Я не могу заставить отображаемые изображения на моей домашней странице сокращаться. Я бы не возражал против размера трех меньших (хотя я хотел бы знать, как изменить их размеры тоже – на всякий случай), но тот, что справа, слишком велик. Я бы хотел, чтобы он был на 30% больше, чем у меньших. Я проверил элементы на странице и нашел следующее:

@media only screen and (min-width: 768px) ul.featured-products li:nth-child(4n), ul.featured-products li.fourth { width: 39%; margin-top: -20%; } 

Я уменьшил значения для ширины и margin-top и получил большое изображение, чтобы сжиматься, но я не знаю, откуда я могу получить правильный код. Я попробовал это в поле Custom CSS, но это не сработало. Я играл с размером изображения раньше, и теперь значения, которые я только что упомянул, ушли, когда я проверяю элементы …


Хорошо, вот мой дополнительный вопрос: если бы я хотел изменить размер других изображений (возможно, захочу сделать это в будущем и хочу быть готовым), могу ли я использовать тот же код и просто изменить его части? Я пробовал это, но он работал только для третьего изображения. Я изменил код на:

 @media only screen and (min-width: 768px) { div.home-intro ul.featured-products li:nth-child(3n), div.home-intro ul.featured- products li.third { width: 18%; margin-top: 0; } } 

Когда я попытался сделать то же самое с двумя другими изображениями, он также переопределит код для четвертого изображения. Я также понял, что страницы продуктов первых двух тестовых продуктов выглядят прекрасно, в то время как те, что были для последних двух, повсюду (описание находится далеко от изображения, связанные с ним изображения слишком велики).

WooCommerces css довольно специфичен, поэтому иногда бывает сложно переопределить его. Чтобы переопределить их css, вам нужно быть БОЛЬШЕ конкретным с вашим css. Таким примером может быть:

 @media only screen and (min-width: 768px) { div.home-intro ul.featured-products li:nth-child(4n), div.home-intro ul.featured-products li.fourth { width: 20%; margin-top: 0; } } 

В приведенном выше примере я добавил родительский элемент в правило css (div.main-wrapper). Это правило теперь более конкретное и должно переопределять css Woo. И вы можете просто поместить это в поле Custom css, это должно быть хорошо.

Примечание. В идеале вы должны создавать собственный размер изображения и редактировать свой шаблон, чтобы использовать этот размер изображения.