I'm having trouble getting the text to align vertically in the middle and closer to the image. The vertical-align:middle property doesn't seem to be working for me. Additionally, when I resize the screen width, the layout changes from a horizontal row to a vertical one, causing the content to move outside of the designated section.
Currently, my setup involves placing a div row within a section, resulting in this layout: https://i.sstatic.net/pVOpC.png
Here's how it looks when the screen width is changed:
https://i.sstatic.net/DvDgk.png Code:
<section style="background-color:lightblue;">
<div class="container-fluid justify-content-center align-middle text-center pt-2 pb-2" style="max-height:600px">
<div class="row no-gutters align-middle">
<div class="col-lg-5">
<h2>Text</h2>
<p>Et qui deserunt nostrum epellatsitatibus et id veniam eius veniam animi repellat quas.</p>
</div>
<div class="col-lg-2">
<img src='img\img_combined2.png' alt='' style="max-height:600px;"/>
</div>
<div class="col-lg-5 text-center align-middle">
<h2>Text</h2>
<p>Et qui deserunt nostrum voluptates error quod. Quia reiciendis beatae. Hic beatae molestiaeserunt autem. Est necessitatibus et id veniam eius veniam animi repellat quas.</p>
</div>
</div>
</div>
</section>