Currently, I'm dealing with an issue using bootstrap carousel code. The carousel text displays properly on desktop screens but disappears when viewed on smaller sized screens. It appears that the text is being hidden behind the image. Various attempts have been made to rectify this, including adjusting z-index, utilizing media queries to modify font sizes, margins, and paddings, but unfortunately, the problem persists.
Here is the HTML code snippet:
<div id="carouselExampleDark" class="carousel carousel-light slide" data-bs-ride="carousel">
...
Below is the CSS code snippet:
.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;
}
}