• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Equal Heights Columns in Genesis

Last Updated on March 14, 2019 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.

  • Genesis Columns Advanced
  • Column Shortcodes
  • Column Class Generator

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

  • https://stackoverflow.com/questions/2114757/css-equal-height-columns
  • https://www.hongkiat.com/blog/css-equal-height/
  • https://codepen.io/imohkay/pen/gpard

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

  • Add js and no-js class to body in Genesis
  • Typing effect using Typed.js in Genesis
  • Infinite Scroll in Genesis
  • Masonry in Genesis
  • Adds an Additional JS control to the WordPress Customizer

Categories: Free Content, Genesis Tutorials, WordPress Tutorials Tags: js, matchHeight

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service