Bootstrap 5 Carousel Background Image Won't Resize on iPhone - css

Question

I am making a website using the Bootstrap 5 carousel template. I have the carousel working and it looks great on a laptop or desktop. However, the carousel images are not resizing appropriately on my iPhone. It just zooms in to the upper left corner of the image and you cannot see the rest of the image.
I have tried using the img-fluid class, and if you use Chrome's dev tools and resize down, it works. However, It will not work on my iPhone.
I also included the .carousel in my media query for devices smaller than 600px and used a max-width of 300px, but that is not working either.
Any thoughts on what I am doing wrong?
Below is my HTML and CSS.
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active hero-img hero-img-1 img-fluid" aria-label="Downtown OKC Scissortail Park Image">
<div class="container">
<div class="carousel-caption text-start">
<h1>OKC Scissortail Park</h1>
<p>Welcoming and playful environment in downtown OKC which integrates Oklahoma nature and culture.</p>
<p><a class="btn btn-lg btn-primary" href="https://scissortailpark.org/">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item hero-img hero-img-2 img-fluid" aria-label="Oklahoma City National Memorial Image">
<div class="container">
<div class="carousel-caption">
<h1>Look to the Future, <br>Learn from the Past</h1>
<p>The Oklahoma City National Memorial honors the victims, survivors, rescuers, and all who were forever changed on April 19, 1995.</p>
<p><a class="btn btn-lg btn-primary" href="https://memorialmuseum.com/">Learn more</a></p>
</div>
</div>
</div>
<div class="carousel-item hero-img hero-img-3 img-fluid" aria-label="Oklahoma City National Memorial Image">
<div class="container">
<div class="carousel-caption text-end">
<h1>Chisholm Creek</h1>
<p>OKC's newest entertainment district highlighting pedestrian-friendly venues.</p>
<p><a class="btn btn-lg btn-primary" href="#">Browse gallery</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
#media only screen and (max-width: 600px) {
.carousel {
max-width: 300px;
margin: 0 auto;
}
.carousel-caption h1 {
font-size: 50px;
}
}
My full code can be found on here
You can find the live demo here.

Answer 1

Add background-position: center;