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

Question

[Арсений Смирнов]

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

Как это должно выглядеть:


Смею предположить, что это из-за этого:

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

Ссылка на сайт

Answer 1

[xdevelx]

Зачем для body задан display: grid, если внутри только один элемент - container? Уберите grid для body и все станет на место.

P.S. контейнер не для того используется - он нужен для каждой секции. Для всей страницы его делать не нужно.

Comments

[FrelFrloich]

А если страница и есть сетка? Может ты имел ввиду что для боди не надо задавать стили ибо есть контейнера, ну не принято так, да и проблем может доставить.

[Арсений Смирнов]

Спасибо большое, Вы мне помогли!

[xdevelx]

FrelFrloich, Посмотрите на макет, там контейнер не может быть одним для всей страницы.

[FrelFrloich]

xdevelx, та посотрел, там пиндос полный, на 400 с гаком марджин лефт райт по 700px

Answer 2

[FrelFrloich]

Лови друг, и прекращай баловаться с margin.

и это дермицо пофикси, на кой вообще тебе такие отступы?


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