Почему в консоли не отображается media правила?

В index.html у меня подключен style min.css, компиляция с помощью галпа проходит успешно. Из всех scss файлов всё идёт в min.css, в том числе и медиа правила, однако на самом сайте они не работают и не отображаются в консоли. Сама консоль работает, если вручную задавать в ней какие-либо параметры, обычные css правила так же работают. Не работает именно адаптация. Подскажите, в чём может быть причина, пожалуйста.

Прикрепляю скрины:

Почему в консоли не отображается media правила?

Почему в консоли не отображается media правила?

Дополнительно:

На первом скрине вы показали наличие стилей для media меньше 991.
На втором скрине показываете как ищете их в браузере на ширине 1354.

И тут возникает больше вопросов, чем ответов на ваш вопрос. В частности, а с чего бы им там показывается?

p.s. на втором скрине выбранный div синий. Если это не качество скрина, то я бы проверила код валидатором.

  • Ankhena, да там как ширину не двигай не применяется ничего, всё то же самое, хоть до 576 пикселей сжимай. Синим становится любой div, который выбираю, консоль так работает. Предыдущий проект делала такого не было, с адаптацией было всё нормально. Media правила появлялись в консоли и там можно было как угодно их менять, подгонять под размер. А тут только в min.css они есть, а в самой консоли и на сайте не отображаются. На ширине 990 должны были сработать флексы в колонку, а не в ряд, как на ширине более 991.

    Почему в консоли не отображается media правила?

  • Ankhena, спасибо за совет!) буду разбираться дальше
  • natalieeccc, тут либо выкладывайте ссылку на сайт либо минимальную песочницу на codepen.io с видимой проблемой.
    Либо самостоятельно проверяете скобочки и тд в css.
  • Ankhena, нашла ошибку, сидела перепроверяла всю вёрстку и нашла, что вместо закрытия тега body стоит . и весь сайт наследовал свойства body. сейчас заработала адаптация. меняю ширину и появляются соответствующие медиа правила для каждой ширины)
  • natalieeccc, div при выделении в девтулзах перестал быть синим?


    • + Заказать

     

    Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

     

      • Почему в консоли не отображается media правила?Есть ответ
      • 08.04.2024
      Ответить

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

      1. Убедитесь, что вы правильно использовали медиа-запросы в вашем CSS файле. Проверьте, что вы указали правильные условия для различных типов устройств (например, максимальная ширина экрана или ориентация устройства).

      2. Проверьте, что ваш файл CSS подключен к вашему HTML документу. Убедитесь, что путь к CSS файлу указан правильно и нет ошибок в пути.

      3. Проверьте консоль браузера на наличие ошибок в вашем CSS файле. Возможно, там будут отображаться сообщения об ошибках, которые могут помочь вам найти и исправить проблему.

      4. Попробуйте очистить кэш браузера и перезагрузить страницу. Иногда это может помочь в случае, если браузер сохраняет старую версию CSS файла.

      5. Если вы используете какие-либо инструменты для оптимизации CSS (например, препроцессоры или сборщики), убедитесь, что они правильно обрабатывают медиа-запросы и не вызывают ошибок.

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

    Оставить комментарий