我的引导程序轮播背景图像不随浏览器窗口大小调整

Question

Okay so I'm new to programming and I've been embarking on a project where I'm developing the front end for a personal website. I decided to use a bootstrap carousel background image slider in my index.html but the size of the page tends to shrink and the carousel text also shrinks and overlaps when I adjust my browser screen.

so this is a link to what I'm trying to say

my code is like this

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

I'll appreciate help.

Answer 1

use @media screen and (max-width: 600px) {} in css for small screen

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