Проблема макета столбца CSS только в Mac OS Safari

Question

У меня проблема с сайтом WordPress / WooCommerce, над которым я работаю, из-за чего возникает проблема с разметкой сетки продуктов, отображаемых на домашней странице сайта.Снимок экрана ниже:

Правильный экран должен выглядеть следующим образом (браузер Windows Chrome):

Проблема с отображением возникает только при просмотре сайта с Safari в Mac OS.Однако у меня нет Mac, поэтому я не могу проверить это.

Кроме похода в магазин Currys и использования моей мобильной точки доступа, я застрял.Может кто-нибудь пролить свет на то, что может быть причиной этого, и, возможно, предоставить мне какой-нибудь код CSS для исправления?

Веб-сайт можно увидеть здесь: http://chickenguard.kinsta.com/

Answer 1

Я могу воспроизвести ошибку в Safari на экране шириной 1400 пикселей.И я нашел причину этого: в таблице стилей есть это правило CSS:

.woocommerce.products-listing-grid .products.products-loop-column-3 > .product, 
.woocommerce.products-listing-grid .products.products-loop-column-3 > .product.last {
    width: 32%;
    margin-right: 2%;
}

Если я деактивирую width: 32%; в этом правиле, width становится 31,9% (определено в .woocommerce .products.products-loop-column-3 > .productПравило), и вся страница / сетка продуктов выглядит правильно, как в других браузерах.

Так что я думаю, вам следует либо стереть этот параметр ширины из этого правила, либо создать другое правило, которое перезаписывает его.