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.

Previous post
Next post

23 Comments

  1. Flash Alexander

    Seriously? You just couldn’t bring yourself to add another row and adjust the margins/padding? You must be having a love affair with jQuery? I might add this to my snippets and try it a couple times to see if it is worth the hassle. It might turn our faster if all I have to do is copy and paste?

    Reply
    • Stephen

      If you add another row then the text would stack on top of eachother and then the buttons instead of text/button/text/button etc as you’d want it to.

  2. Erkan

    Awesome, thank you so much
    This will come very handy when I’m overhauling my personal website.

    Reply
  3. Michael

    Awesome piece of script!

    I’m finding that although it looks good when the page initially loads, resizing the window breaks the layout as the text attempts to adapt to the narrower/wider window, but the height of the blurb cannot adapt and the button placement is off.

    Reply
  4. Marna Towne

    This is not working for me. Can you clarify where the code is placed? I have it:
    Divi Theme Options>Integration>
    Enable Header code
    Place the script in “Add code to the of your blog”

    Reply
  5. stephen job

    Hi Stephen,
    I tried this on my homepage with blurb sections and a call to action button but it doesnt seem to be working. Should i change the blurbs to text boxes?

    Reply
  6. Cheryl

    Just what I’ve been looking for. Thanks.

    Reply
  7. Amanda

    This is just friggin amazing – for so long now I have struggled as this used to make designs look so messy. Thank you SJ, i just love your tutorials.

    Reply
  8. Amanda

    This is just friggin amazing – for so long now I have struggled as this used to make designs look so messy. Thank you SJ, i just love your tutorials.

    Reply
  9. Kay Westrap

    Any chance that you could do a tutorial, video or step by step instructions for the numpties – i.e. me 🙂

    Reply
  10. Stephen Job

    Hi Stephen,
    I tried the above but could get it to work? Im guessing ive gone wrong somewhere

    Reply
  11. Steve

    Hi, thanks for this it looks great! I’ve tried using it on the blurb module but it doesn’t seem to work. Can it be used for this? Thanks, Steve

    Reply
  12. Stephen Job

    Hi Stephen,
    Ive tried this a few times and still cant get it to function how it is shown above. Would you mind letting me know where ive possibly gone wrong

    Reply
  13. David Ligon

    Thanks for your helpful article. This page is getting bookmarked for future use.

    Reply
  14. shaun

    Nice work. Saves a lot of friggin around and adding code that messes up the mobile layouts.
    Cheers,

    Reply
  15. Hannah

    Oh wow, this is amazing! Thanks so much.

    Is it at all possible to use this more than once on the same page? I tried using it in two separate sections but obviously it’s only able to set one “tallest” figure.

    I don’t know much (anything!) about jquery but I was wondering if it’s possible to duplicate the code with e.g. tallest-2 and rest-2, like you could with CSS for example?

    Ta!

    Reply
  16. David R. Calvert

    I take it the vertical alignment would work with images as well?

    How would you go about vertical alignment with blurb and testimonial modules that have different heights for images and different text?

    Reply
  17. Mike Nhim

    This is not working for me. Nothing happens when I try.

    Reply
  18. Hieu VoTrung

    Hi Stephen,

    Thank you so much for the solutions. Before knowing this method, I usually use 2 row: 1 for text and 1 for button 😀

    Reply
  19. Chris

    Does DIVI Switch have a switch for this? I’m trying to figure out what Switch would do for me. I love this tip but do I just “steal” your code or buy Switch?

    Reply
    • Stephen

      Most of Divi Switch’s features are freely available through my tuts but its worth grabbing if you want to speed up your workflow.

  20. Colin Steele

    I like it, I’ve been using flex-box but I’ll save this and might try it sometime.

    Reply
  21. Tyler Sandiford

    Question… Obviously this is a great solution if you have a row where there is a clear taller area. Moreover if you have a situation like this on more then one page having the jquery in the site wide css area obviously this will be super easy to add that css class to the various areas that need the equal heights. My question though: If I have this situation in more then one place on the same page will this work, as in if I have a row with 3 columns say text/button like shown and then later I have blurbs or testimonials that also require the same treatment will it work if there are 2 or more .tallest tags.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.