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;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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