Belzer
@Belzer
Веб-дизайнер

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

Здравствуйте, верстка некорректно отображается на мобильных устройствах.
Заходя на сайт с мобилки отображается 3/4 части сайта, остальная часть сайта уходит за пределы экрана.
Как это выглядит:
tR4Wa5V.png
Как это должно выглядеть:
9nA8LmL.png

Смею предположить, что это из-за этого:
.portfolio {
    margin-left: 105px;
    margin-right: 114px;
  }
  .portfolio .portfolio-title {
    text-align: center;
    font-size: 36px;
    margin-top: -20px;
  }
  .portfolio .portfolio-items {
    margin: 0 auto;
    -ms-grid-rows: (1fr)[8];
    -ms-grid-columns: (1fr)[1];
        grid-template: repeat(8, 1fr)/repeat(1, 1fr);
    gap: 15px;
  }

Ссылка на сайт
  • Вопрос задан
  • 81 просмотр
Решения вопроса 2
develx
@develx
Web developer
Зачем для body задан display: grid, если внутри только один элемент - container? Уберите grid для body и все станет на место.

P.S. контейнер не для того используется - он нужен для каждой секции. Для всей страницы его делать не нужно.
Ответ написан
@FrelFrloich
Лови друг, и прекращай баловаться с margin.
61b7886223660777344438.jpeg
и это дермицо пофикси, на кой вообще тебе такие отступы?
61b78921621a4972790728.jpeg

всё дело в margin твоём в общем, фикси и не пиши так. Почитай про flex, grid и позиционирование, ты делаешь не верно всё.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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