Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen

Issue

I am using bootstrap carousal code. My carousal text looks good when seen on the regular size but it disappears when seen on the smaller size screen. It seems the text is getting behind the image. I have tried using z-index, media query for changing font sizes, margins, paddings but it still the same.

HTML code:

  <div id="carouselExampleDark" class="carousel carousel-light slide" data-bs-ride="carousel">
<div class="carousel-indicators">
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
  <div class="carousel-item active" data-bs-interval="10000">
    <img src="images/image1.jpeg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h1>First slide lable</h1>
    </div>
  </div>
  <div class="carousel-item" data-bs-interval="2000">
    <img src="images/image2.jpeg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h1>Second slide lable</h1>
    </div>
  </div>
  <div class="carousel-item">
    <img src="images/image3.jpeg" class="d-block w-100" alt="...">
    <div class="carousel-caption d-none d-md-block">
      <h1>Third slide label</h1>
    </div>
  </div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="visually-hidden">Next</span>
</button>

CSS code:

.carousel-caption {
  text-align: center;
  margin-bottom: 18%;
  z-index: 999;
  font-size: 100px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  position: absolute;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 20%;
}
@media only screen and (max-width: 800px) {
.carousel-caption {
  text-align: center;
  font-size: 20px;
  }
  }

Solution

You have the classes d-none d-md-block on the captions. This effectively puts display: none from xs and then display: block from md and above. Remove all 3 d-none and your issue will be solved.

Change:

<div class="carousel-caption d-none d-md-block">
    // caption
</div>

To:

<div class="carousel-caption">
    // caption
</div>

Edit: You actually do not need d-md-block either, given the element is blocked by default.

Answered By - Siddharth Bhansali