Медиа запрос не реагирует на стили

Question

Нужна помощь Только начал верстать первый сайт При попытки адаптация сайта медиа запрос не реагирует на стили Мета тег не помог

@media only screen and (max-width: 600px) {

  #doma {
    margin-left: 10px;
    font-size: 20px;
  }

  body {
    background: white;
  }

  nav {
    margin-left: -20px;
  }

  .col-4 {
    margin-top: 20px;
  }

  .topmenu {
    font-size: 8px;
  }

  .align2 {
    margin-left: 0px;


    .container {
      margin-top: 200px;
      width: 100%;
    }

    .radius2 {
      margin-top: 2300px;
      height: 120px;
    }

    .col222 {
      margin-top: -400px;
    }

    .copyright {
      margin-left: 10px;
    }

    .copyright1 {
      margin-left: 0px;
      color: black;
      margin-top: -90px;
    }


    .gotr {
      font-size: 8px background: black;
    }

    .form {
      color: white margin-left:170px;
      margin-top: 10px;
    }

    .grout {
      display: none;
    }

    .err {
      display: none;
    }

  }

Answer 1

Жаль вы не прикрепили HTML, придётся снова пальцем в небо тыкать, но я попробую:

Номер раз:

В HTML между

<head></head>

Есть строчка <meta name="viewport" content="width=device-width, initial-scale=1">? Если нет, добавьте.

Номер два-с:

В чистом CSS нельзя внутри стиля одного элемента писать стиль для другого, как это сделали вы, написав в стилях для .align2 стили для ещё нескольких блоков.

Тут у нас два варианта: если эти элементы в HTML находятся ВНУТРИ блока .align2, стили для них должны выглядеть так:

.align2 { margin-left: 0px; }

.align2 .container {
  margin-top: 200px;
  width: 100%;
}

.align2 .radius2 {
  margin-top: 2300px;
  height: 120px;
}

.align2 .col222 {
  margin-top: -400px;
}

.align2 .copyright {
  margin-left: 10px;
}

.align2 .copyright1 {
  margin-left: 0px;
  color: black;
  margin-top: -90px;
}


.align2 .gotr {
  font-size: 8px background: black;
}

.align2 .form {
  color: white margin-left:170px;
  margin-top: 10px;
}

.align2 .grout {
  display: none;
}

.align2 .err {
  display: none;
}

Если же нет - используйте код выше, но удалите в нём все .align кроме самого верхнего.

Номер ТРИ:

Если всё выше написанное не помогло, попробуйте дописать !important после каждого правила. Пример:

.align2 .container {
   margin-top: 200px !important;
   width: 100% !important;
}

БЛОГ НА HUSL

Медиа запрос не реагирует на стили

Ответы (1 шт):