While working on my website using the Bootstrap 5 carousel template, I encountered an issue with the carousel images not resizing correctly on my iPhone. The images appear zoomed in to the upper left corner and cut off on smaller devices.
I've attempted solutions like using the img-fluid class and including media queries for smaller devices, but none seem to solve the problem specifically on iPhones.
If you have any insights or suggestions on what might be causing this display issue, please let me know!
Below is a snippet of the HTML and CSS code I'm currently using:
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
// Carousel content goes here...
</div>
@media only screen and (max-width: 600px) {
.carousel {
max-width: 300px;
margin: 0 auto;
}
.carousel-caption h1 {
font-size: 50px;
}
}
If you want to check out the full code, it's available on GitHub. Feel free to explore the live demo here.