Есть страница
вот как выглядит
, вот ее код
<header class="container vh100">
<div class="vertical-center">
<div class="row">
<div class="logo__wripper col-md-12">
<a href="#">
<img src="./images/logo_hirez.png" alt="GoMobile" class="logo">
</a>
</div>
</div>
<div class="row">
<div class="velcome-text col-md-12">
<p>Привет! Мы агентство мобильного маркетинга Go Mobile. Единая точка входа в мир мобайла. <br>В первую очередь, мы агентство, а кроме того - платформа закупки мобильного трафика (Bidder) <br>и мобильная CPA/CPI сеть.</p>
<form method="post" action="#" class="">
<p>Круто! Что делать?</p>
<p>Напишите, как вас зовут
<input type="text" class="form-text" size="8" name="name">, что хотите
<input type="text" class="form-text" size="8" name="target"> и ваш e-mail
<input type="text" class="form-text" size="8" name="email"> .</p>
<p class="text-center">
<button class="send btn btn-lg">Отправить</button>
</p>
<p>Если еще сомневаетесь, то <a href="http://gomobile.ru/#portfolio">вот для вас наши кейсы,</a> ну и <a href="">общая презентация об агентстве.</a></p>
<p>Для коллег из рекламных агентств <a href="#">здесь</a> отдельное предложение.</p>
</form>
</div>
</div>
</div>
</header>
и css который выравнивает блок
.vh100 {
height: 100vh;
position: relative;
}
.vertical-center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
как сделать чтобы отступ между logo и velcome-text зависил от высоты вьюпорта ?
если уменьшать высоту страницы уменьшается отступ и в итоге лого прилипает к тексту
