While testing the responsiveness of our website built with Bootstrap, we noticed an issue where an image appears to be "floating" on top of the page when viewed in iPad mode using the browser's device toolbar. Despite this, the site functions correctly on desktops, mobile devices (Galaxy, iPhone X, etc.), and even iPad Pro settings.
https://i.sstatic.net/meAJ7.png
.our-story {
color: #fff;
background-color: #67b7f2;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f7959898838483859687b7c2d9c7d9c5">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid pt-5">
<div class="row our-story">
<div class="col-md-6 offset-md-1 mb-3">
<h2 class="mt-5">We Move Lives</h2>
<p>Our process begins with asking a lot of questions and listening to your needs and concerns. Then we survey your entire home and assess everything that needs to be moved. We identify high-value, fragile items such as pianos, antiques, paintings, and chandeliers that will require special care. Finally, we create a detailed schedule for packing, loading, and delivery.</p>
<a href="about-us.html"><button type="button" class="btn btn-outline-tosa">Our Story</button></a>
</div>
<div class="col-md-4">
<img src="img/steve-justin-bruce-standup.png" class="img-fluid mt-5">
</div>
</div>
</div>