I am facing an issue with my banner image that is supposed to display only on small devices in a specified section. For more details, please refer to the following Stackoverflow Topic
However, this setup has caused the content below to overlap and no longer be in sync with the responsive flow based on the height of the banner image.
Here is the code snippet for implementing this:<a href="https://jsbin.com/fekijujuli/1/edit?html,css,output" rel="nofollow noreferrer">JSBin Link</a>.img-responsive {
max-width: 100%;
}
@media (max-width: 1000px) {
.cropped {
position: relative;
height: 250px;
}
.cropped .img-responsive {
position: absolute;
left: 50%;
transform: translateX(-50%);
max-width: 150%;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Website Title Here</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cfef3f3e8efe8eefdecdca9b2acb2acb1fef9e8fdad">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
<section class="banner">
<div class="cropped">
<img src="https://images.unsplash.com/photo-1601134728471-aa7f168d82ed?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1952&q=80" alt="" class="img-responsive">
</div>
</section>
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-lg-9 mx-lg-auto mt-5 mb-5">
<h2 class="text-uppercase">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, dolorum.
</h2>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
<p class="lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed magni fugiat dolorum! Deserunt velit fuga provident, beatae delectus omnis culpa alias expedita, inventore molestiae aut explicabo? Nihil eum odit saepe voluptatem optio voluptatibus,
repudiandae laborum ducimus suscipit eius voluptatum porro debitis fugiat nobis ipsa inventore animi placeat expedita ex sint.</p>
</div>
</div>
</div>
</body>
</html>