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

Question

[Her1z]

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

На предпросмотре:


К тому же, почему то на телефоне сайт еще и слишком маленький (по горизонтали можно крутить)
Если важно, пытался много и по разному медиа запросы реализовать, остановился на этом

@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 */
}
}

Answer 1

[Her1z]

Забавно, что некоторые страницы категорий, как это например - https://lomopak.ru/product-category/pakety-polipro...

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

Решение оказалось простое:
Был установлен плагин WP Rocket, который сжимал мои CSS и JS файлы. После снятии этой волшебной галочки, все заработало.
Закрыто.

Answer 2

[Максим К]

А если задать media (min-width: 600px) and (max-width: 800px) {
/* CSS-стили */;
} например

Comments

[Her1z]

Тщетно

[Максим К]

Her1z, если поможет, то на телефоне плёнка ПВХ отображается как у вас на скрине. Телефон xiaomi redmi 9. А вот вся остальная вёрстка дико едет, плюсом у вас там 2 бургер меню.

[Her1z]

Максим К, да, вот именно! Посмотрите комментарий что я оставил тут ниже