While viewing on a large screen with Bootstrap 5, everything looks good:
https://i.sstatic.net/Vm6bH.png
However, when I resize the screen, the text in the first column overflows onto the sections below instead of adjusting properly.
https://i.sstatic.net/4wrMq.png
This was my original code:
<section class="bg-overlay ratio ratio-21x9 bg-soft-blue">
<video poster="./assets/img/photos/movie2.jpg" src="./assets/media/home.mp4" autoplay loop muted></video>
<div class="video-content">
<div class="container">
<div class="row pt-10">
<div class="col-lg-6 bg-soft-blue">
<h2 class="text-uppercase heading mb-5">Title</h2>
<p class="lead fs-lg lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span><a href="#" class="text-uppercase btn btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-signup">Read More</a></span>
</div>
<div class="col-lg-6"></div>
</div>
</div>
</div>
<!-- /.video-content -->
</section>I attempted to modify it like this:
<section>
<div class="row pt-10 bg-soft-blue">
<div class="col-lg-6 bg-soft-blue">
<h2 class="text-uppercase heading mb-5">Title</h2>
<p class="lead fs-lg lh-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span><a href="#" class="text-uppercase btn btn-outline-primary rounded-pill" data-bs-toggle="modal" data-bs-target="#modal-signup">Button</a></span>
</div>
<div class="col-lg-6 bg-overlay ratio ratio-4x3">
<video poster="./assets/img/photos/movie2.jpg" src="./assets/media/home.mp4" autoplay loop muted></video>
<div class="video-content">
<div class="container">
video here
</div>
</div>
</div>
</div>
<!-- /.container -->
</section>However, this approach actually divides it into two sections and worsens the problem. I also tried embedding a video but it didn't auto-play. It's acceptable if the video doesn't work on small screens and is just an image, but responsiveness is crucial. I suspect it might be a positioning issue in the first column or perhaps it's not achievable. Any assistance would be greatly appreciated.