Using Bootstrap 4. Essentially, I have a carousel that is cycling through a bunch of different project features (GIFs with captions). I have the captions below it based on some code from elsewhere on SO.
Works perfectly on medium/large screens but once I get too small, the captions just disappear altogether. How can I keep the captions 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>
For CSS, I'm using the following relevant stuff:
.carousel-item .carousel-caption {
position: static;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
margin-bottom: 10px;
}
Any ideas? I can provide more code but the project is pretty long and I don't think anything else is messing with it.
