Почему мои медиа-запросы CSS3 не работают?

Question

нужна ваша помощь.Не могу решить эту проблему, так долго искала ответ и ничего не нашла.

Это простой медиа-запрос, написанный абсолютно правильно.

@media (max-width: 942px) {
.top-header {
    flex-direction: column;
}
}

Кроме того, я не вижу, как стиль "flex-direction: column" применяется к ".top-header" в Web Inspector.

Использование препроцессора LESS и koalaкомпилятор, просто чтобы вы знали.Не получайте никаких ошибок от компилятора, сгенерированный файл CSS в порядке: этот код медиа-запроса есть, прямо в конце файла, как и должно быть.

Используется медиа-окно просмотра:

<meta name="viewport" content="width=device-width, initial-scale=1">

Вот фрагмент кода HTML, где можно найти «.top-header»:

<header>
    <div class="container">
        <div class="top-header">
            <div class="top-header__logo">
                <img src="img/Welcome-page/header/Logo.png" alt="Logo">
            </div>
    ...
</header>

Там вы можете увидеть этот класс имен «.top-header», так чтонеужели это может быть ...

Так что на самом деле не могу понять, в надежде получить прямые ответы.

Answer 1

Отсутствует закрывающий } медиазапрос.

@media (max-width: 942px) {
  .top-header {
      flex-direction: column;
   }
}

см. Последнее закрытие}

Answer 2

Попробуйте использовать это вместо:

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />

Кроме того, ваш медиа-запрос отсутствует}