Create Equal Heights for Text Columns in a Row

To create equal heights for text columns in a row depending on data entered can be a CSS challenge, instead of futzing with CSS and height rules at different media queries there is a nice jQuery solution that automagically solves the layout aptly called… matchHeight.

pre-match-heights

So in the above I am using custom post types with custom fields, for title, company and a list of qualifications – only the title is mandatory, if all the content is not populated I have uneven height mess. The initial layout is achieved with % column widths and floats.

And below is using matchHeights.

equal columns of text

Using Match Heights

Setting it up

Download the latest version of matchHeights.

Move jquery.matchHeight-min.js into your /js folder and create an init file matchheight-init.js and enqueue them.

jQuery(function($) {
$('.post').matchHeight(); //set your target CSS class
});
view raw matchheight-init.js hosted with ❤ by GitHub
<?php
function wpb_match_height() {
wp_enqueue_script ( 'matchheight' , get_stylesheet_directory_uri() . '/js/jquery.matchHeight-min.js', array( 'jquery' ), '1', true );
wp_enqueue_script ( 'matchheight-init' , get_stylesheet_directory_uri() . '/js/matchheight-init.js', array( 'matchheight' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_match_height' );
view raw functions.php hosted with ❤ by GitHub

Make sure you set the target CSS class in the init file and that’s all there is to it. There are some extra options and values you can set just check out the matchHeights page.

Since I find myself using this a lot I have also created a plugin which allows you to do all the above without touching the code.

2 Comments

  1. Sean Vandenberg on January 9, 2016 at 4:50 am

    Neil, awesome. I recall a few months ago setting a ridiculous amount of media queries to accomplish this :). Thanks!

    • Neil Gowran on January 9, 2016 at 7:23 am

      Yes it’s a great plugin with active development going on.

Leave a Comment





%d bloggers like this: