Uneven column heights with color backgrounds

Hi, love, love, love the plugin so far but have one question at the moment.

I dropped in a three column row, gave a different color background and dropped text boxes into each. The text boxes have different amounts of copy so I have three different sized color boxes. How do I make the box heights even? I’ve tried putting a one column row under and assigning it a class with clear:both but that did not work. I can’t think of anything else to try except manually padding them which won’t work once the screen size changes.

Thank you.

ETA: I assigned a color background to the row which at least takes away the white space but I’d like to have the two shorter columns extend down to match the longest.

Hi Eric,

Thanks for the kind words! In this particular situation, you’ll need to adjust bottom padding of the actual column. Column settings can be accessed via the little book icon once you have a module in a column. Let me know if you have any trouble finding that. This help article may help as well. Thanks Eric!



Thanks for the response. I’m playing around with padding the two shorter columns and it sort of works. It breaks as the screen gets narrower. The text in the longest column becomes compressed and pushes down past the two padded columns. I could fix this by giving all three excess padding but that just increased the next problem which is that at the point where the columns become stacked I have two with a bunch of unneeded blank space.

Is this just something we have to live with and work around for now?

Hey Eric,

Unfortunately, yes. The text compressing is necessary on smaller devices which would increase the size of that particular column. I suppose the best bet would be to decrease the amount of text to match the other columns better. Want to send me a link to your site so I can take a look and maybe make an alternate recommendation?


Thanks Billy but it’s not necessary for you to check the site. I tweaked it by setting the row background the same color as the 2nd longest column and padding the shortest column a bit longer than needed. It’s a bit of a cludge but it will do. Thanks for your time and again, can’t stress how much I love this plugin.

Great idea, Eric, good work and great to hear you are loving BB! :slight_smile:

Just in case you are still looking for a solution for equal height columns, give a try to: http://brm.io/jquery-match-height-demo/.
It works perfectly with beaver builder. Before turning to jQuery, I tried several CSS tricks but no chance to fulfil all my needs. In addition, matchHeight is ultra simple to use.

Marc I am having trouble finding this plugin in the plugin search area. Is it matchHeight? or jQuery Match height?