Jumbotron cuts the text - html

Question

My Jumbotron cut's the text and button, when I have a low resolution.
Do I need to solve this problem with a media query?
Or is there a "nicer" solution for this? at the moment I have only media query for the width.
.hero-bg {
background-color: #2e82b0;
}
.img-logo {
max-width: 100%;
}
.jumbotron {
height: 100vh;
}
<!-- Header -->
<section id="home" class="hero-bg jumbotron">
<div class="container">
<div class="row align-items-center justify-content-center mx-auto">
<div class="col mt-0 pt-0">
<hr class="mt-0 pt-0 mb-5 sichtbar" style="background: white;">
<br>
<img class="img-logo mt-5 pt5 mx-auto img-fluid d-block img-responsive" src="assets/img/logo.png" alt="Rollywood-Logo">
</div>
</div>
<div data-aos="zoom-in" class="row align-items-end justify-content-center mx-auto text-center mt-5 pt-5">
<div class="col pb-3">
<h2 class="jumb-title">Willkommen in meiner Welt:</h2>
<p class="lead jumb-p">
Mit emotionalen Worten und kreativen Konzepten die passende Bühne bereiten. <br />
<span>Überzeugen. Begeistern. Bewegen – und der Star sind SIE!</span></p>
<a href="#texting" role="button" class="jumb-btn btn-round mt-2 smooth">
<large><span class="icon-arrow-down"></span></large>
</a>
</div>
</div>
<!-- col -->
</div>
<!-- container -->
</section>
</header>
<!-- Header -->

Answer 1

You should use min-height instead of height...
.jumbotron {
min-height: 100vh;
}