CODEWITHSUNDEEP
htmltwitter-bootstrapcssbootstrap-4
Dominic Meyer
Dominic Meyer

Reputation: 206

Jumbotron cuts the text

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 -->

enter image description here

Upvotes: 0

Views: 249

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362580

You should use min-height instead of height...

.jumbotron {
    min-height: 100vh;
}

Upvotes: 1

Related Questions