[FIXED] How to get rid of the vertical gap between elements for some layouts?

Issue

I'm working on a web app with Bootstrap. In the mobile version it looks the way I want: the header on the top, below is a girl image, and below is the description of the application.

In desktop version I want to have header on top left, right under that description, and a girl image at the right side. Unfortunately, the girl image makes a big gap between the header and the description.

How can I get rid of that gap?

To recap, I want to move the description upper, to have it just under header, in that way.

Part of html, responsible for it:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container mt-lg-4">
  <div class="row">
    <p class="col-sm-6 mt-lg-5 mt-sm-1 h1"><strong>Find perfect product for your skin</strong></p>
    <img src="https://via.placeholder.com/200" class="col-sm-6" />

    <div id="description" class="col-sm-6">
      PrimerAI will examine your skin and find the perfect product for your skin's needs.
    </div>
  </div>
</div>

Solution

You have two competing layouts here, involving not just ordering but containing structure. The simplest solution might be to repeat the image and show it as needed.

Also, use semantic elements in your page structure, like headings and paragraphs, to wrap text. It's important for accessibility and it's just good practice. The strong element is intended to add emphasis, but headings already have it so I've used CSS to get bold text.

.text-bold {
  font-weight: bold;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="container mt-lg-4">
  <div class="row">
    <div class="col-sm-6">
      <h1 class="mt-lg-5 mt-sm-1 text-bold">Find perfect product for your skin</h1>

      <img src="https://via.placeholder.com/500x600" class="img-fluid d-sm-none" />

      <p id="description">
        PrimerAI will examine your skin and find the perfect product for your skin's needs.
      </p>
    </div>

    <div class="col-sm-6">
      <img src="https://via.placeholder.com/500x600" class="img-fluid d-none d-sm-block" />
    </div>
  </div>
</div>

Answered By - isherwood

Answer Checked By - Marilyn (PHPFixing Volunteer)