This is the code for my carousel. It works great when in full screen, but responsive places the captions and carousel indicators below the image. How do I fix this? I've tried a lot of various things.
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/img/courtyard.png" alt="First slide"> <!--IMAGE SIZE 1080px x 550px-->
<div class="carousel-caption d-none d-md-block">
<p align="left">
<a id="hero-caption" href="#">
<span style="font-size: 200%;">
...
</span>
<br>
<span style="font-size: 350%;">
...
</span>
</a>
</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/img/openfield.png" alt="Second slide"> <!--IMAGE SIZE 1080px x 550px-->
<div class="carousel-caption d-none d-md-block">
<h5>...</h5>
<p>...</p>
</div>
</div>
</div>
</div>
Bootstrap v4.5
Your question is not accurate enough, but
You added class d-none which set property display: none !important; so carousel captions is not display below 768px and in responsive places the captions and carousel indicators can`t be below the image.
https://getbootstrap.com/docs/4.5/utilities/display/#hiding-elements
You need to remove styles for fonts also.
Look at this example (more you can find in https://getbootstrap.com/docs/4.5/components/carousel/):
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-block">
<h5>First slide label</h5>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-block">
<h5>Second slide label</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-block">
<h5>Third slide label</h5>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</div>
</div>
</div>
</div>