Why is it so hard to vertical align stuff? Not anymore.

Why is it so hard to vertical align stuff? Not anymore.

**Please Note: This tutorial was tested with Divi 2.7. **

In this post we’re going to share a JQuery hack that makes vertically aligning content super easy. But first off, why do you need it?

The call-to-action example

Let’s say you have three pieces of text based content with a button underneath each. Here’s how you’ll want to have that in the builder:

ec builder
  • Google+
  • Facebook
  • Twitter

The problem with this set up is that unless the text is the exact same length for each button, the result is this…

ec before
  • Google+
  • Facebook
  • Twitter

Not exactly pretty is it? Ideally those buttons would be aligned. You could place the buttons in their own row but then all three buttons would stack underneath all three text blocks which is a UI nightmare. So the solution is to ensure that the text boxes are of equal height, even if some have less text. That way the buttons will align underneath them and still stack properly on mobile devices.

Our jQuery hack ensures that the text boxes are the same height. Here’s how it works.

ec before
  • Google+
  • Facebook
  • Twitter

We identify the largest text area, in this case it’s the third column. We use the Divi advanced module options to add a CSS class of ‘.tallest’. We then add a ‘.rest’ class to the other text boxes we want to manipulate.

Our jQuery takes the height of the module with the .tallest class and apply it to any modules with the .rest class. Cool right?

Here’s what that look’s like:

<script>
 var mq = window.matchMedia( "(min-width: 980px)" ); // Identify a minimum width for jQuery
 
 if (mq.matches) { // Only apply jQuery if viewport = 980px or more
 
 jQuery(document).ready(function() {
 var height = Math.max(jQuery(".tallest").height(), jQuery(".rest").height());
 jQuery(".tallest").height(height);
 jQuery(".rest").height(height);
 });
 
 }
</script>

You can just add this directly to the head section under Divi > Theme Options > Integrations.

We’ve also added a condition that says the jQuery only executes if the view port is over 980px wide, which is the point where Divi stacks the columns and vertical aligning becomes redundant.

Here’s what it look’s like now –

equalize columns
  • Google+
  • Facebook
  • Twitter

And there you have it. Vertical aligning made easy.

NOTE: We know in some cases you can use flex-box CSS or displaying info in a table. We wanted to provide a more rugged solution and feel that this is it. We hope you like it! 🙂

Stephen James

SJ is a web developer living in the coastal town of Southsea, England. He is a Divi and WordPress advocate and the founder of Divi Space.