I recently integrated the Bootstrap product example into my website, located at https://getbootstrap.com/docs/5.0/examples/product/. Everything works well except for a minor issue I encountered on iPads or when zooming in on computers - the images on the website tend to move around. For reference, you can view how it appears here: https://i.sstatic.net/3lOpQ.jpg
Here is a comparison of the normal appearance on my computer without any zoom: https://i.sstatic.net/Zw4ic.jpg
Would appreciate any suggestions or solutions on how I can ensure that the images remain fixed at the bottom?
Below is the HTML code snippet:
<div class="d-md-flex flex-md-equal w-100 my-md-3 ps-md-3">
<div class="bg-dark me-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden" id="boats">
<div class="my-3 py-3">
<h2 class="display-5"><i class="fas fa-anchor"></i> Add your boat</h2>
<p class="lead">We offer presets for many boats and are working on adding your boat to the Trimlog app.
In relation to your boat, the boat specific data will be stored.</p>
</div>
<div class="bg-light shadow-sm mx-auto" id="boats-bg"></div>
</div>
...
</div>
...
Additionally, here is the relevant CSS styling information:
#boats-bg {
background-image: url("../assets/images/sailing/DSC06987.JPG");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 80%;
height: 300px;
border-radius: 21px 21px 0 0;
}
...