I am currently working on creating a responsive website and I have a specific layout in mind. I want to center some text and an image both vertically and horizontally within a div that has a minimum height, leaving plenty of blank space above and below the content.
My approach involves using rows and columns, following this code structure:
.row{
background-color: rgb(120,120,120);
min-height: 300px;
}
.imgclass{
min-height: 100px;
}
.row .col-md-5{
border: 2px solid black;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div>Previous Section</div>
<div class="row justify-content-center align-items-center g-0">
<div class="imgclass col-md-5 m-0 p-0 text-center">
<img src="/img/body.png" alt="body_img">
</div>
<div class="col-md-5 m-0 p-0 text-left">
<div>
Some text
</div>
<div>
Some other text
</div>
</div>
</div>
<div>Next Section</div>While everything appears well-adjusted in desktop view with the image and text centered with ample space around them, there seems to be a significant gap between the two columns in mobile view. My goal is to reduce this gap while maintaining equal spacing above and below but tightening the distance between the image and text.
If you can provide guidance on how to achieve this responsive design behavior, it would be greatly appreciated. Below is a snippet of the code where you can observe the issue more clearly when resizing the window for various devices.