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

[hertz]

Медиа запросы не помогают. Я их использую, и на предпросмотре все действительно хорошо, но на всех телефонах какие то беды. Там не адаптируется совсем, все 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 */
}
}

 

[hertz]

Забавно, что некоторые страницы категорий, как это например - https://lomopak.ru/product-category...4fe4-b9f9-23065b9cf479&customize_autosaved=on

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

 

[hertz]

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