0

Basically I'm making a site using Wordpress and have 3 columns, all with an image, a title, and a paragraph. The titles vary in length (some are 2 lines, some are 3), so some have more height and I'd like to line up the 3 paragraphs under the titles.

So the code I have basically grabs all the headers, stores the largest height, then sets all header heights to the largest height to line up the paragraphs under the headers. When resizing, this works fine when more lines are added to the header but when less lines are required there's white space under everything because I'm only using the largest height for the css.

Any suggestions to fix this or make my code better since I'm repeating myself?

Here's what I've got so far:

function resizeHeaders() {
    let blurbHeaders = document.querySelectorAll('.et_pb_module_header');
    let headerHeight = 0;

    blurbHeaders.forEach((header) => {
        if(header.offsetHeight > headerHeight) {
            headerHeight = header.offsetHeight;
        }
    });

    blurbHeaders.forEach((header) => {
        header.style.height = `${headerHeight}px`;
    });
}
    
jQuery(window).resize(function() {
    resizeHeaders();
});
mikesuchor
  • 23
  • 6

1 Answers1

-1

Try This

.col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}
<div class="col-container">
  <div class="col" style="background:orange">
    <h2>Column 1</h2>
    <p>Hello World</p>
  </div>

  <div class="col" style="background:yellow">
    <h2>Column 2</h2>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <p>Hello World!</p>
  </div>

  <div class="col" style="background:orange">
    <h2>Column 3</h2>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
    <p>Some other text..</p>
  </div>
</div>
Sahan
  • 44
  • 2