Sridhar Katakam

Genesis and WordPress Tutorials

Equal height elements in WordPress using jQuery.equalHeights

by 13 Comments

jQuery.equalHeights is a simple jQuery plugin to equalize heights of multiple elements on a page by Matt Banks.

In this article I show how jQuery.equalHeights can be used to set equal heights for

  1. footer widgets in Genesis
  2. teaser entries when using Bill Erickson's Genesis Grid plugin

The method in this tutorial can very well be used in any WordPress theme.

Setting equal heights for Footer widgets

Before

equal-heights-widgets-wp-before

After

equal-heights-widgets-wp-after

Step 1

Upload jquery.equalheights.min.js to child theme directory/js.

Step 2

Create a file named say, equalheights-init.js in the same location as above having this code:

To view the full content, please sign up for the membership.

Already a member? Log in below or here.

  • That could be working also at the features arcticles that you post at your home page, with metro pro theme? I see that at Metro pro theme, the featured articles at home page doesn´t adjust equal height.

    Can we use jQuery.equalHeights to do that? Thank you.

    Reply

  • Hi Sridhar,

    Thanks for a great post! I’d like to target more than one element to give equal height to. Could I do this for instance?


    jQuery(document).ready(function($) {

    $(window).load(function() {
    if (window.innerWidth > 480) {
    $('.article-list article').equalHeights();
    $('.flexcontrols li a').equalHeights();
    }
    });

    $(window).resize(function(){
    if (window.innerWidth > 480) {
    $('article-list article').height('auto');
    $('article-list article').equalHeights();

    $('flexcontrols li a').height('auto');
    $('flexcontrols li a').equalHeights();
    }
    });

    });

    Thanks again 🙂

    Reply

  • Hi Sridhar,

    Extremely helpful information, saved me many hours of frustration.

    How would I reset, or remove, the calculated values on resize? Something of an @media issue. I’m using a responsive grid and some of the elements do not go to 100% width until screen size is 800 it calculates a value. If I then rotate the screen to portrait, and the width is now less than 800, it retains the value previously calculated.

    Thanks!

    Reply

  • Hi

    After hours of trying the same with CSS, I stumbled upon this and it works great. However, it ignores padding attribute.

    For example, if Column ‘A’ has height of 200px with no padding and Column ‘B’ has height of 100px with padding 20px, the function renders the Column ‘B’ height to 200px + 20px (padding-top) + 20px (padding-bottom) making total height to 240px. How do I fix it?

    Thanks

    Reply

  • Once again Sridhar, you make things easy. Thanks for this – saved me a ton of time trying to cram equal heights into a genesis extended layout with sidebars UNDER the content both with custom background images. I should have looked here first!!

    Reply
    • >