Фоновое изображение моей bootstrap карусели не регулируется размером окна браузера

Question

Хорошо, так что я новичок в программировании, и я начинаю проект, в котором я разрабатываю интерфейс для персонального веб-сайта. Я решил использовать ползунок bootstrap карусели фонового изображения в своем индексе. html, но размер страницы имеет тенденцию уменьшаться, и текст карусели также уменьшается и перекрывается при настройке экрана браузера.

так что это ссылка на то, что я пытаюсь сказать

мой код такой

.container {
    margin-top: 20px;
}

.navbar{
  background-color : #3e403e;
}

.text h1{
    font-size: 110px
}

.text p{
    font-size: 40px
}

hr{
    background-color: white

}


.text a{
padding: 15px 80px 15px 80px;
}

.header-text {
    position: absolute;
    top: 20%;
    left: 1.8%;
    right: auto;
    width: 96.66666666666666%;
}

<div id="indexCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="images/background.png" alt="Slide One">
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="images/background 2.png" alt="Slide Two">
        </div>

        <div class="carousel-item">
            <img class="d-block w-100" src="images/background 3.png" alt="Slide Three">
        </div>
        <div class="header-text hidden-xs">
            <div class="col-md-12 text center">
                <div class="container">
                    <div class="text">
                        <h1 class="display-4" style="color:white"><strong>Beats, Sounds Vibes!!!</strong></h1>
                        <p class="lead" style=" color:white">What are you waiting for?</p>
                        <hr class="my-4">
                        <p style="color: white">XQ's music is made from the purest selection of industry-level sounds
                            and
                            samples. Vibe with him, and you"ll see what we're talking about.</p>
                        <a class="btn btn-primary btn-lg" href="beats.html" role="button">Dive in</a>
                    </div>
                </div>

            </div>
        </div>

    </div>


</div>

Буду признателен за помощь.

Answer 1

используйте экран @media и (max-width: 600px) {} в css для маленького экрана

 @media screen and (max-width: 600px) {
.text h1{
    font-size: 40px
}
}