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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.