@Ily4farmer

Почему сайт гуляет на мобильных экранах?

Решил попрактиковать верстку под мобильные устройства, сверстал весь макет и столкнулся со следующей проблемой.
Когда сайт на десктопе в браузере, все выглядит как надо
5ed809fb6b43f845138950.jpeg
И он даже нормально адатпитируется под размер экранов
5ed80a4e3ba24415803912.jpeg
Но как только я решаюсь переключиться на любую мобильную версию(iphone x к примеру), сразу же все становится непонятно
5ed80b0251538218233923.jpeg
Если нажать на любую кнопку, то сайт встает как надо, но при этом я могу передвинуть сам сайт левее
5ed80b9761eaf914041309.jpeg
Как это исправить?
Вот код https://jsfiddle.net/ily4famer/hmt21wzk/1/
  • Вопрос задан
  • 204 просмотра
Решения вопроса 1
develx
@develx
Web developer
@media (max-width: 730px) {
  .team-people {
    width: 700px;
  }
}

Вот зачем 700px для мобильных?

И сразу же
.team-people {
    width: 785px;
}

И в ту же степь
.portfolio-form {
    width: 510px;
}


Если уж прям очень нужно ограничить ширину, то нужно ставить max-width и верстку не сломаешь.
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
AntonLitvinenko
@AntonLitvinenko
HTML coder
Проверяйте, возможно какой-то элемент имеет неадаптивную ширину. По очереди в отладчике удаляйте элементы
Ответ написан
YouFire
@YouFire
Потому что у тебя возможно,что то выходит за рамки,просто удаляй всё пока этого не будет,как удалишь тот div и у тебя не будет гулять,восстанавливай код и работай с поломанным div классом
Ответ написан
@Olegarh1a
Хотел помочь увидел структуру
<header class="header">
        <div class="container">
            <div class="header-block">
                <div class="header-logo">
                    <div class="header__img">
                        <img src="img/logo.png" alt="BAK-ONE">
                    </div>
                    <div class="header__text">
                        <!-- /.header__logo -->
                        <div class="header__title">BAK-ONE</div>
                        <!-- /.header__title -->
                        <div class="header__subtitle">One Page Flat Template</div>
                        <!-- /.header__subtitle -->
                    </div>
                    <!-- /.header-text -->
                </div>
                <!-- /.header-img -->


закрыл сразу
Ответ написан
@labunskyi
если "гуляет" экран, - скорее всего у кокого-то элемента задан padding, который выталкивает его за рамки экрана.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы