My Bootstrap 4 carousel is displaying GIFs with captions for different project features. The captions work well on medium/large screens, but disappear entirely on smaller screens. How can I ensure the captions remain visible on smaller screens?
<div class = "carousel-inner">
<div class = "carousel-item active">
<img class = "d-block carousel-image" src = "assets/translate-trimmed.gif" alt = "GIF of Sketchy translating objects.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">Translate</h5>
<p class = "feature-detail">
Using the "Select Shape" option, user can move shapes around the canvas. Translation is controlled by dragging the mouse across the screen.
</p>
</div>
</div>
<div class = "carousel-item">
<img class = "d-block carousel-image" src = "assets/raise-lower-trimmed.gif" alt = "GIF of Sketchy raising/lowering layers.">
<div class = "carousel-caption d-none d-md-block">
<h5 class = "feature-name">
Raise/Lower
</h5>
<p class = "feature-detail">
The "Raise" and "Lower" buttons can move shapes up or down in the list of layers. Layers are preserved even after saving/loading.
</p>
</div>
</div>
In my CSS, I have included the following relevant code:
.carousel-item .carousel-caption {
position: static;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
margin-bottom: 10px;
}
Any suggestions on how to fix this issue? I can provide more code if needed, but the project is quite lengthy so I believe this snippet covers the problematic area.