Почему не работает медиа запрос для мобильных устройств?

Question

[KamburI]

Нужно для определенной ширины экрана задать ширину блока 100%.
Этот код не работает для мобильных устройств:

.info-modal {
 border: 2px solid #000;
  background: #fff;
  padding: 30px 40px;
  z-index: 1000;
  width: 732px;
  position: relative;
  left: 50%;
  margin-left: -366px;
}
@media screen and (max-width: 732px){
.info-modal {
    width: 100%;
    height: 100%;
    padding: 22px 20px 50px;
    left:0;
    margin-left:0;
    border: 0;
}
}

Как решить проблему?

Comments

[Rustam Bainazarov]

А у меня ваш код прекрасно работает:


Но это на ПК и в песочнице. А так — я подозреваю, что у вас нет вот этого в head:

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

.

Помимо этого, что за код такой? Что за безумный margin-left: -366px;? Я понимаю, что это половина ширины, но зачем именно так выравнивать? Если это модальное, то почему relative? Обычно у модального делают обёртку на fixed/absolute, которая по ширине занимает 100% сайта, а уже внутри неё делают обертку контента, которая по середине выровнена. Кроме того, не задают так ширину, а делают max-width: 700px + width: 100%.

Вот так:

[Рома Зварич]

KamburI ,

Этот код не работает для мобильных устройств

Очень размытое описание проблемы.
Напишите, что именно не работает.

Также, выложите пожалуйста фрагмент кода на https://codepen.io/pen/, чтобы было с чем работать.

[Rustam Bainazarov]

Рома Зварич, скорее всего у него просто нет мета-тега

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

.

Помимо его плохого кода.

[Рома Зварич]

Рустам Байназаров, я тоже про это подумал

Answer 1

[Евгений Залецкий]

Разве не нужно перед media ставить знак @?

Comments

[Рома Зварич]

Там есть знак @
Просто его сайт воспринял как упоминание пользователя "media"

[WapSter]

Рома Зварич, ну автор сам виноват, тег code для слабаков наверное.

[Евгений Залецкий]

Тимур Турсунбаев, ну и смысл писать данный комментарий? Чисто флуд. Лучше бы помог с решением проблемы.

[WapSter]

Женя Залецкий, смотри автор исправил код. Нашли проблему в метатеге. Видимо помог. Может наставлять на правильное постановление вопроса не флуд? В отличии от твоего тыканья пальцем?)