@Her1z

Товары не адаптируются под ширину экрана на телефонах, но адаптируются на предпросмотре?

Медиа запросы не помогают. Я их использую, и на предпросмотре все действительно хорошо, но на всех телефонах какие то беды. Там не адаптируется совсем, все 4 столбца как и на десктопной версии пытаются сунуться.
На телефоне:
6283c82abb2c7045735413.png
На предпросмотре:
6283c8441a2d4957431727.png

К тому же, почему то на телефоне сайт еще и слишком маленький (по горизонтали можно крутить)
Если важно, пытался много и по разному медиа запросы реализовать, остановился на этом
@media screen and (max-width: 800px) {

.woocommerce.columns-3 ul.products li.product, .woocommerce-page.columns-3 ul.products li.product {
   width: 45%; /* was 30.75% */
}

.woocommerce ul.products.columns-3 li.product, .woocommerce-page ul.products.columns-3 li.product {
  width: 45%; /* for category pages */
}

.woocommerce ul.products li.first, .woocommerce-page ul.products li.first {
  clear: none; /* was both */
}

.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
  margin-right:3.8%; /* was 0 */
}
}
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
@Her1z Автор вопроса
Забавно, что некоторые страницы категорий, как это например - https://lomopak.ru/product-category/pakety-polipro...

Работает на телефоне прекрасно, как на предпросмотре, а какие то ужасно, как та, что в теме приложена. Я не понимаю почему так. CSS сравнил, везде одинаковый.

Решение оказалось простое:
Был установлен плагин WP Rocket, который сжимал мои CSS и JS файлы. После снятии этой волшебной галочки, все заработало.
Закрыто.
6283f85a345df575011313.png
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
А если задать media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
} например
Ответ написан
Ваш ответ на вопрос

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

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