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

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"  data-bs-ride="carousel">
<div >
  <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"  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 >
  <div  data-bs-interval="10000">
    <img src="images/image1.jpeg"  alt="...">
    <div >
      <h1>First slide lable</h1>
    </div>
  </div>
  <div  data-bs-interval="2000">
    <img src="images/image2.jpeg"  alt="...">
    <div >
      <h1>Second slide lable</h1>
    </div>
  </div>
  <div >
    <img src="images/image3.jpeg"  alt="...">
    <div >
      <h1>Third slide label</h1>
    </div>
  </div>
</div>
<button  type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
  <span  aria-hidden="true"></span>
  <span >Previous</span>
</button>
<button  type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
  <span  aria-hidden="true"></span>
  <span >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;
  }
  }

CodePudding user response：

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 >
    // caption
</div>

To:

<div >
    // caption
</div>

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