Как расположить контент по центру?

Question

[Arhangel_one]

Как расположить контент по центру при 100vh, чтобы на мобильном разрешении контент не залазил на другие секции ? https://codepen.io/ant-one/pen/XWrxKgm

Answer 1

[Robert-critical-thoughts]

https://codepen.io/ant-one/pen/XWrxKgm

.head__inner {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;

Comments

[Arhangel_one]

на мобильном разрешении контент залазит на другие секции

[Рома Зварич]

Arhangel_one, какой контент? На какие секции? Как нам получить возможность проверить Вашу ситуацию?
Выложите весь код

[Robert-critical-thoughts]

Arhangel_one, Добавьте media queries под нужное вам расширение, если не получится, скриншот с проблемой, и нужное вам разрешение.

[Arhangel_one]

Пример https://anton-one.github.io/vh/ . Если открыть с мобильного то 2 секция налазит на первую.

[Robert-critical-thoughts]

Arhangel_one, Без обид, но вы отвратительно сверстали вторую секцию. Она у вас ползет по швам, вы хотели второй секции задать background? или он у вас идет для какого-то определенного блока во второй секции?

[Arhangel_one]

Как нужно исправить чтобы не полз по швам ?

[Robert-critical-thoughts]

align-items: center; уберите, у секции about

[Robert-critical-thoughts]

Arhangel_one, если не поможет, напишите в телегу, попробуем разобраться @BlackGores

Answer 2

[Beeetle]

Answer 3

[Иван Иванов]

пропиши

.head {
height: 100vh;
display:flex;
align-items:center;

Comments

[Arhangel_one]

на мобильном разрешении контент залазит на другие секции

[Дмитрий Христоев]

height заменить на min-height: 100vh;

Answer 4

[Дмитрий Христоев]

у всех проблема, если блок выравнивается по центру через align-items: center; то при height: 100vh и высоте экрана менее высоты блока, блок будет по центру и вверх уже не прокрутить.
Решение, заменить height на min-height - блок будет по центру, но при экране менее высоты блока, блок останется прикреплен к верху с возможностью прокрутки экрана, а не по центру без прокрутки.

https://codepen.io/haoss/pen/wvwYLMm