@Sherbatiy

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

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

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

Тестировал в разных браузерах и на мобильных девайсах, проблема актуальна.
Использую wordpress+woocoommerce, а в качестве шаблона PageBuilder - Themify
Ссылка на витрину
На скриншотах видно, что при некорректном отображении карточки, высота списка элементов = 331px.
А после обновления 661px.
Но я не понимаю как использовать эту информацию и где искать проблему.
  • Вопрос задан
  • 301 просмотр
Решения вопроса 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;
}

554b5fa252844d63a2358a7b839692f3.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 3
Redjek
@Redjek
Множество историй, коль желаешь расскажу!
Это конфликт стилей темы и воо
Ответ написан
PavelK
@PavelK
Может какой из плагинов вносит дополнительные изменения в css через JavaScript ?
Ответ написан
@ommunist
Делаю и поддерживаю мультиязычные сайты
woocommerce.css грузится вместе с css темы, кто-то из них двоих вам не нужен. Определяйте стили в одном месте, а загрузку второго отключите, иначе хлопот не оберетесь.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы