How can I make my carousel caption responsive? - html

Question

I have been taking a few online classes and tutorials to better understand how to create websites using html/css and bootstrap in particular.
However one problem I have been unable to overcome is - I’m unable to make a carousel caption responsive - it just will not react to the resizing of a window.
HTML:
<div id="slides" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#slides" data-slide-to="0" class="active"></li>
<li data-target="#slides" data-slide-to="0"></li>
<li data-target="#slides" data-slide-to="0"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="IMG/TEAL ORIGAMI.jpeg">
<div class="carousel-caption">
<h1 class="display-2">ICE3DESIGN</h1>
<h3>Bespoke Web Design</h3>
<button type="button" class="btn btn-outline-light btn-lg">VIEW PORTFOLIO</button>
<button type="button" class="btn btn-primary btn-lg">ENQUIRE NOW</button>
</div>
</div>
<div class="carousel-item">
<img src="IMG/background2.png">
</div>
<div class="carousel-item">
<img src="IMG/background3.png">
</div>
</div>
CSS:
.carousel-inner img {
width: 100%;
height: 100%;
}
.carousel-caption {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.carousel-caption h1 {
font-size: 500%;
text-transform: uppercase;
text-shadow: 1px 1px 10px #000;
}
.carousel-caption h3 {
font-size: 200%;
font-weight: 500;
text-shadow: 1px 1px 10px #000;
padding-bottom: 1rem;
}
I expect that the caption resize accordingly and appear in the centre of the carousel image, however what actually happens is when the browser is resized the caption stays the same size and is far too large and not centered.

Answer 1

So far, you haven't provided a link to the live site, which makes things a bit more difficult. However, I did notice a few things for testing your code.
Consider adding a rule for to make carousel items flex containers:
.carousel-item {
display: flex;
flex-direction: column;
justify-content: center;
}
Remove translation for carousel-captions. Because the sibling image is absolutely positioned (not shown), you'll have to leave absolute positioning here as well. Maybe a background-image would make life easier, though.
.carousel-caption {
position: absolute;
/* top: 50%; */
/* transform: translateY(-50%); */
}
With these rules in place, you'll at least achieve vertical centering of the .carousel-caption. Then you could add the appropriate #media queries to deal with the font overflowing the box (because the container is absolutely positioned).
jsFiddle