PopWP

WordPress and Genesis Tutorials

Equal Heights Columns in Genesis

Last Updated on Favorited: 0 times

Yesterday, I have added a reference post on this site about Columns layout in Genesis and that can be used with any Genesis or Non-Genesis themes. However, there are different ways to use columns in a site and the simplest solution is using CSS for adding column classes using shortcodes.

Default Columns having different heights ‘before and after’ following this tutorial.

Here are the best plugins and resources you can use apart from your default column CSS classes to built column based contents.

I generally use the default columns classes and Codepress Columns in almost projects. While writing the recent reference post about Genesis columns, I have found that the columns boxes are not equal due to the amount of content added in different columns.

This can be simply fixed with giving a min-height: 250px; like to make sure that every column contains that height. Still, sometimes we want to have made it on autopilot and that’s where javascript works.

We can use Additional CSS classes Flexbox to make it equal height still it will be complicated and not work in most cases. Here are some of the guide

Still, as the growing web, we need a fixed solution and that’s where javascript works better. There are many ways but I am sharing two most popular javascript method to make the columns equal height in WordPress site.

Using Plugin (Simplest)
Using Javascript (Simple)

The Plugin way

Equal Height Columns is the most popular plugin to make any column or CSS class with a fixed height. Download and Install the plugin.
Hover to Settings >> Equal Height Columns and paste your desired CSS classes using comma ‘,’ like this

.five-sixths, .four-sixths, .four-fifths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-fifths, .three-sixths, .two-fourths, .two-fifths, .two-sixths, .two-thirds

Breakpoints where your columns became 100%. It will be 800px, 959px or 1023px depend on the theme you are using. Add the exact width and
Save the changes.

The Good thing about this plugin is that it provides the facility to Grouping the classes and changing the breakpoints @media (max-width) for different CSS classes.

This way you can simply add another group to a different Classes and boom! you are ready to go.

The JavaScript way

jquery-match-height (JS) is most popular javascript hosted on Github for making CSS Classes equal heights.

Here how you can use it.
Step 1. Download and copy jquery.matchHeight-min.js to your child theme/js/ folder.
Step 2. Create an additional file jquery.matchHeight-init.js and paste this.

jQuery(function ($) {
    $('.five-sixths, .four-sixths, .four-fifths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-fifths, .three-sixths, .two-fourths, .two-fifths, .two-sixths, .two-thirds').matchHeight(); //set your target CSS class
});

Replace the CSS classes as per your need. and could create additional targeting using the same.

jQuery(function ($) {
    $('.five-sixths, .four-sixths, .four-fifths, .one-fifth, .one-fourth, .one-half, .one-sixth, .one-third, .three-fourths, .three-fifths, .three-sixths, .two-fourths, .two-fifths, .two-sixths, .two-thirds').matchHeight(); //set your target CSS class

    $('.additional-class').matchHeight(); //set your target CSS class
});

Step 3. Enqueue scripts
a) Add this in functions.php

<?php
//* Remove the above PHP opening tag

//* Enqueue jquery.matchHeight.js
add_action( 'wp_enqueue_scripts', 'enqueue_jquery_match_height_script' );
function enqueue_jquery_match_height_script() {
	wp_enqueue_scripts( 'matchHeight-script', get_stylesheet_directory_uri() . '/js/jquery.matchHeight-min.js', array ( 'jquery' ), '1.0.0' );
	wp_enqueue_scripts( 'matchHeight-init', get_stylesheet_directory_uri() . '/js/jquery.matchHeight-init.js', array ( 'jquery' ), '1.0.0' );
}

or
b) Paste this into Your site under Genesis >> Theme settings >> Header or in Footer

<script type='text/javascript' src='/js/jquery.matchHeight-min.js'></script>
<script type='text/javascript' src='/js/jquery.matchHeight-init.js'></script>

Make sure to change the path or the URL. and Test it.

It is working… !!
Let me know if you are having any problem working with these steps.

Related Posts

Reader Interactions