0

Делаю адаптив на странице и заметил одну вещь, которую я совсем не могу понять: у меня responsive mobile отличается от responsive desktop

Причем самая важная особенность состоит в том, что есть блок .center-block, который меняет свою ширину в зависимости от ширины экрана:

@media screen and (max-width: 767px)
.center-block {
    width: 100%;
    padding: 0 8px;
}

И тогда все выглядит нормально: введите сюда описание изображения

Но если я меняю на Mobile:

введите сюда описание изображения

То все ломается, все блоки, которые находятся выше становятся в длину 980px (непонятно для меня почему), ширина .center-blockкак будто перестает воспринимать ширину экрана и меняться и страница ломается

До этого у меня жестко тупил localhost и выдавал следующую ошибку:

Error: Manifest request to /_nuxt/0e62de9e27088d02f526.hot-update.json timed out. at XMLHttpRequest.request.onreadystatechange

Не знаю насколько это взаимосвязано, но решил упомянуть

В чем проблема, что я делаю не так?

2
  • 2
    Вангую, что надо дописать meta viewport в html developer.mozilla.org/ru/docs/Glossary/Viewport
    – Alexey Ten
    30 мар 2021 в 7:16
  • @AlexeyTen да, оказывается забыл на этой странице указать. Большое спасибо!)
    – KAVA
    30 мар 2021 в 7:24

1 ответ 1

0
попробуй убрать screen and оставь:

@media (max-width: 767px)
.center-block {
    width: 100%;
    padding: 0 8px;
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.