Я не могу заставить отображаемые изображения на моей домашней странице сокращаться. Я бы не возражал против размера трех меньших (хотя я хотел бы знать, как изменить их размеры тоже – на всякий случай), но тот, что справа, слишком велик. Я бы хотел, чтобы он был на 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, это должно быть хорошо.
Примечание. В идеале вы должны создавать собственный размер изображения и редактировать свой шаблон, чтобы использовать этот размер изображения.