I have created a custom CSS class called "custom-class" and applied it to the col div. This column contains dynamic images, so I have added a vertical scrollbar property to handle the overflow.
While everything looks fine on a desktop, the layout breaks or extends beyond its boundaries on mobile devices.
How can I prevent the overflow from affecting the col div in mobile view?
Simply put, I am struggling with the overflow issue on mobile screens.
.custom-class {
position: absolute;
overflow-y: auto;
height: 350px;
-webkit-overflow-scrolling: touch;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="71131e1e05020503100131455f475f43">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="row">
<div class="col-xl-12">
<section class="py-5 header">
<div class="container py-4">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="tab-content">
<div class="col-md-12">
<div class="row">
<div class="col-sm-7"></div>
<div class="col-sm-5 p-0">
<div class="col-md-12 custom-class"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>