@ZMaxonchik

Как грамотно реализовать 1экран лендинга во всю высоту браузера?

Всем привет!
Дано:
<div class="box">
			<p class="title">ТЕКСТ</p>
			<p class="info">ТЕКСТ2</p>
			<div class="button">
				<a href="">КНОПКА</a>
			</div>
		</div>


.box {
                 padding-top: 20vh;
                 height: 100vh;
        }
       .button {
	         margin: 12vh auto 0;
       }


Вопрос: Как грамотно адаптировать?
Сделал через медиа запросы по ширине, затем заметил, что button часто вылазит за пределы 1 экрана.
Пока вижу решение через медиа запросы по высоте.
Может есть более красивое решение, чтобы кнопка помещалась в 1 экран?
  • Вопрос задан
  • 181 просмотр
Пригласить эксперта
Ответы на вопрос 2
@organica
Я не знаток, но бутстрап точно поможет :)
Ответ написан
Комментировать
anatoly_kulikov
@anatoly_kulikov
Помог ответ? Отметь решением!
Сделайте .box флексом, внутренности оберните в ещё один контейнер и ему выставите равнение по центру. Где-то вот так:

.box {
    display: flex;
    width: 100%;
    height: 100vh;
}
.box__inner_wrap {
    display:  block;
    width: 100%;  // или какая нужна
    margin: auto;
}


У других элементов уже настроиваете размеры, отступы и прочее. Используйте медиа-запросы, чтобы подогнать под нужные вам размеры экрана.
Ответ написан
Ваш ответ на вопрос

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

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