Почему при первом открытии витрины ползет верстка (Wordpress+Woocoommerce)?

Question

[Sherbatiy]

При первом открытии страницы витрины woocoomerce не корректно компонуются карточки товара.
Некорректное отображение товаров
Некорректное отображение товаров с вкл DevTools

Обновляя страницу или изменяя размеры экрана через toggle device toolbar в Chrome, товары компонуются правильно.
Корректное отображение с вкл DevTools

Тестировал в разных браузерах и на мобильных девайсах, проблема актуальна.
Использую wordpress+woocoommerce, а в качестве шаблона PageBuilder - Themify
Ссылка на витрину
На скриншотах видно, что при некорректном отображении карточки, высота списка элементов = 331px.
А после обновления 661px.
Но я не понимаю как использовать эту информацию и где искать проблему.

Answer 1

[Александр Сисюкин]

ul элементу стоит

<ul class="products masonry-done" style="position: relative; height: 238.3px;">

а внутри его стоят li

<li class="product-category product first" style="position: absolute; left: 0px; top: 0px;">
	<a href="http://lense26.com/product-category/acuvue/"><img src="http://lense26.com/wp-content/uploads/2016/07/acuvue-oasys-12pk-348x244.jpg" alt="Acuvue" width="348" height="244">		<h3>
			Acuvue		</h3>
		</a></li>

а так как они выпали с потока блок не расширяется автоматически и остается таким как его ваш плагин высчитал в моем разрешение это было height: 238.3px с включенным фаир багом было 173. как выход не позиционируйте li как абсолют сделайте релатив (как самое быстрое решение ) и расставьте так как вам это угодно. Соответственно с релатив они попадут в поток и проблема наезжания пропадет.

p. s.
как затычка временная

.product-category.product {
  display: inline-block;
  float: none !important;
  left: 0 !important;
  position: relative !important;
  top: 0 !important;
 vertical-align: top;  // в других разрешениях были на одной линии товары
}
.products.masonry-done {
  height: auto !important;
}

Comments

[Sherbatiy]

Спасибо! Проблему с категориями действительно решает. Но почему-то высота в списке товаров автоматически не считается и футер улетает вверх.
height: auto !important;
Поможете тут?

[Александр Сисюкин]

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

[Sherbatiy]

Александр Сисюкин: Добавил ваш код еще и к классу .woocommerce ul.products li.product - непосредственно карточки самих товаров и все стало ок. Спасибо!

Answer 2

[Денис Петровский]

Это конфликт стилей темы и воо

Answer 3

[Pavel K]

Может какой из плагинов вносит дополнительные изменения в css через JavaScript ?

Answer 4

[ommunist]

woocommerce.css грузится вместе с css темы, кто-то из них двоих вам не нужен. Определяйте стили в одном месте, а загрузку второго отключите, иначе хлопот не оберетесь.