Squishing column content in mobile while centering on desktop-CodePudding

I'm building a responsive website, and I want to place some text and an image centered vertically and horizontally in a minimum-height div (lots of blank space on the top and bottom).

I'm using a row and columns to do this:

.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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div>Previous Section</div>

<div >
    <div >
      <img src="/img/body.png" alt="body_img">
    </div>
    <div >
      <div>
        Some text
      </div>
      <div>
        Some other text
      </div>
    </div>
</div>

<div>Next Section</div>

In desktop mode, everything looks fine, the image, and text are side by side and centered with lots of space around them.

However, in mobile, there is a large gap between the two columns. I want to squeeze the columns together so that there is an equal amount of space on the top and bottom but not much space between the image and text.

How can I implement this responsive behavior?

I've added a code snippet. If you expand the snippet window, you'll see the desktop mode, where there is no issue. However, in the smaller window, the columns stack on top of each other, and there's this gap between them. I want to reduce this gap.

CodePudding user response：

Easy fix: add flex-column flex-XX-row to your .row, where XX can be whatever it fits better for you, md, lg, etc ...

.row {
  background-color: rgb(120, 120, 120);
  min-height: 300px;
}

.row .col-md-5 {
  border: 2px solid black;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div>Previous Section</div>

<div >
  <div >
    <img src="https://picsum.photos/200" alt="body_img">
  </div>
  <div >
    <div>
      Some text
    </div>
    <div>
      Some other text
    </div>
  </div>
</div>

<div>Next Section</div>