Hey there, I'm new to the world of programming and currently working on a project to create the front end of my personal website. I've opted to utilize a bootstrap carousel background image slider in my index.html file. However, I've noticed that the size of the page tends to shrink and the text in the carousel also shrinks and overlaps when I adjust the browser screen.
You can check out what I mean here
This is a snippet of my code:
.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 would really appreciate any assistance you can provide. Thank you!