CODEWITHSUNDEEP
javascripthtmlcss
09eric09
09eric09

Reputation: 187

Prevent headings that break to multiple lines from pushing below content down?

I'm pulling in a bunch of blogs in a 2 column setup. Some of the titles are very long, and break onto 2 and sometimes 3 lines.

Problem is, it pushes the featured images below down, and the images under the heading do not line up vertically if one heading takes up multiple lines.

Is there a way to prevent the below content from being pushed down once the headers break to multiple lines?

<div class="row">
  <div class="col-md-6">
   <h2>This Heading takes up One line</h2>
    <img src="#">
  </div>

 <div class="col-md-6">
    <h2>This Heading takes 2 lines and pushes the image below down, throwing off vertical alignment with the image next to it.</h2>
     <img src="#">
 </div>

</div>

Upvotes: 0

Views: 607

Answers (1)

code and pixels
code and pixels

Reputation: 674

If you're looking to maintain alignment across a row of main article images regardless of how long the title is, maybe you can truncate the titles?

Example:

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* just to get the 2 cols side-by-side */
.row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.col-md-6 {
  width: 47%;
  flex-grow: 0;
  flex-shrink: 0;
  outline: 2px solid black;
}
<div class="row">
  <div class="col-md-6">
    <h2 class="truncate">This Heading takes up One line</h2>
    <img src="#">
  </div>

  <div class="col-md-6">
    <h2 class="truncate">This Heading takes 2 lines and pushes the image below down, throwing off vertical alignment with the image next to it.</h2>
    <img src="#">
  </div>

</div>

If truncating titles isn't an option, you can also display the blog title/image blobs as flexbox columns and using content justification to keep the images aligned, sort of like this:

/* use a flexbox column to keep the longer titles under control */

.col-md-6 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


/* just using a quick grid to get 2 columns - not necessary for the above to work */

.row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
<div class="row">
  <div class="col-md-6">
    <h2>This Heading takes up One line</h2>
    <img src="#">
  </div>

  <div class="col-md-6">
    <h2>This Heading takes 2 lines and pushes the image below down, throwing off vertical alignment with the image next to it.</h2>
    <img src="#">
  </div>

  <div class="col-md-6">
    <h2>A title that's not quite as long by maybe 2 lines</h2>
    <img src="#">
  </div>

  <div class="col-md-6">
    <h2>Yet another title</h2>
    <img src="#">
  </div>

</div>

Hope this helps you further along the way. Good luck, happy coding!

Upvotes: 1

Related Questions