Title: Equal Height Columns
Author: MIGHTYminnow
Published: <strong>March 18, 2015</strong>
Last modified: March 10, 2026

---

Search plugins

![](https://ps.w.org/equal-height-columns/assets/banner-772x250.png?rev=1114939)

![](https://ps.w.org/equal-height-columns/assets/icon-128x128.png?rev=1114939)

# Equal Height Columns

 By [MIGHTYminnow](https://profiles.wordpress.org/mightyminnow/)

[Download](https://downloads.wordpress.org/plugin/equal-height-columns.1.2.1.zip)

 * [Details](https://test.wordpress.org/plugins/equal-height-columns/#description)
 * [Reviews](https://test.wordpress.org/plugins/equal-height-columns/#reviews)
 *  [Installation](https://test.wordpress.org/plugins/equal-height-columns/#installation)
 * [Development](https://test.wordpress.org/plugins/equal-height-columns/#developers)

 [Support](https://wordpress.org/support/plugin/equal-height-columns/)

## Description

**Compatible with PHP 8.2**

**Like this plugin? Please consider [leaving a 5-star review](https://wordpress.org/support/view/plugin-reviews/equal-height-columns).**

Equal Height Columns lets you easily equalize the height of various columns and 
elements.

#### Features

 * Target unlimited elements and element groups
 * Specify simple CSS/jQuery selectors to target elements
 * Specify breakpoint to kick in only at certain screen sizes
 * Easy to use admin interface
 * Heights are equalized immediately after the page has loaded
 * Fully responsive (automatically updates on resize and orientationchange events)
 * Works on mobile devices
 * Works across all modern browsers (including IE8)
 * Comes with custom event listener to manually trigger
 * Super small – 8kB jQuery file size
 * Trigger custom ‘equalheight’ event to force resize

#### Instructions

 1. Navigate to **Settings > Equal Height Columns** in the WordPress admin.
 2. Enter a _selector_ and _breakpoint_ for the first **column group**.
 3. Add/remove column groups by clicking the “+ Add More” and “Remove” buttons.

#### Advanced

Want to trigger the equalizing of the heights manually? No problem. You can skip
entering a selector on the settings page and call the jQuery script yourself using
one of two functions:

    ```
    jQuery( '.selector' ).initEqualHeights();

    // Or

    jQuery( '.selector' ).equalizeTheHeights();
    ```

The difference between these two functions is simply that `initEqualHeights()` will
set up all the events for recalculating the heights when the window is resized or
the global `equalheights` event is triggered, but `equalizeTheHeights()` will simply
equalize the heights without involving any events.

Both functions take three optional arguments, the minimum height (number of pixels),
maximum height, and the breakpoint (below which the heights will revert to their
original size):

    ```
    jQuery( '.selector' ).initEqualHeights( minHeight, maxHeight, breakPoint );
    ```

So an example might look like this:

    ```
    jQuery( '.selector' ).initEqualHeights( 200, 500, 768 );
    ```

When entering a selector on the settings page or using the `initEqualHeights()` 
method this plugin also adds an event ‘equalheights’ to the window, allowing you
to easily trigger the equalizing manually. This is useful if you have added new 
items to the page after it loads via AJAX. You can trigger the event like this:

    ```
    jQuery( window ).trigger( 'equalheights' );
    ```

Another option for controlling which elements get equalized is the `equal_height_columns_elements`
filter. This filter operates on the array of data that gets passed to the JS right
before it is passed. This allows for developers to specify selectors that can’t 
be deleted from the settings page, and for programmaticly building selectors based
on dynamic data. Here’s an example of how the filter can be used:

    ```
    add_filter( 'equal_height_columns_elements', 'custom_ehc_elements' );
    function custom_ehc_elements( $elements ) {

        $elements['element-groups']['custom'] = array(
            'selector'   => '.ehc-target', // Selector goes here.
            'breakpoint' => '768',
        );

        return $elements;
    }
    ```

The keys on the `element-groups` array used by selectors entered on the settings
page will come in as numbered indexes, so to avoid collision it’s best to use named
keys for any custom selectors (we’re using ‘custom’ in the example above, but any
unique string will work).

This plugin is [on Github](https://github.com/MIGHTYminnow/equal-height-columns)
and pull requests are always welcome.

#### NEW: Multi rows

On version **1.2.0** we are introducing a new feature _(for now, only available 
via JavaScript)_ that resolves a common issue if the row number of certain elements
varies across breakpoints when the number of columns change.

For example, if we have 2 columns for tablets and 3 columns for desktops, the third
element in the group would be positioned on the second row for tablets but on the
first row for desktops.

Before this new feature, the equal height would be based on all the elements from
the group. Now you can have “subgroups” for each row, and recalculate when the number
of columns in the rows change.

To use this new feature add the function once per breakpoint:

    ```
    jQuery( document ).equalHeight( selector, columns, minWidth, maxWidth );
    ```

**selector:** The selector of the group of elements that you want to apply the equal
height.

**columns:** The number of columns per row on the breakpoint.

**minWidth:** The minimum width of the breakpoint. Use 1 for mobile.

**maxWidth:** The maximum width of the breakpoint. You can leave empty for the biggest
breakpoint.

The following example would apply equal height for headings with the class **.demo-
heading** in a grid that has 1 column per row on mobile, 2 columns on tablet and
3 columns on desktop:

    ```
    $( document ).equalHeight( '.demo-heading', 1, 1, 767 ); // 1 columns for 1px - 767px
    $( document ).equalHeight( '.demo-heading', 2, 768, 1024 ); // 2 columns for 768px - 1024px
    $( document ).equalHeight( '.demo-heading', 3, 1025 ); // 3 columns for 1025px (and above)
    ```

## Screenshots

 * [[
 * The easy-to-use admin interface.

## Installation

#### Manual Installation

 1. Upload the entire `/equal-height-columns` directory to the `/wp-content/plugins/`
    directory.
 2. Activate Equal Height Columns through the ‘Plugins’ menu in WordPress.

## FAQ

### Is this plugin fully responsive?

Yes! When the function runs it creates event listeners for the window resize and
orientationchange events and recalculates the heights after those events trigger.
You can also specify a breakpoint under which the function will not affect the heights,
allowing you to equalize the heights for larger screens but leave smaller screens
unaffected.

### Does the plugin support multiple collections of items that get equalized independently?

Yes! From the settings page you can enter as many selectors as you’d like, giving
you the ability to equalize the heights of an unlimited number of items.

### What if I am dynamically adding elements to the page after it loads?

The jQuery script uses the selector to always grab the items fresh from the DOM 
in its current state, so as long as the selector matches the newly added elements
they will get included in the calculation. You can trigger the equalizing manually
at any time (such as after new content has been added via AJAX) by triggering the‘
equalheights’ event on the window like this:

    ```
    jQuery( window ).trigger( 'equalheights' );
    ```

Or if you’d prefer to just trigger the equalizing of the heights without involving
any events, you can call the `equalizeTheHeights()` method directly like this:

    ```
    jQuery( '.selector' ).equalizeTheHeights();
    ```

### How can I report security bugs?

You can report security bugs through the Patchstack Vulnerability Disclosure Program.
The Patchstack team help validate, triage and handle any security vulnerabilities.
[Report a security vulnerability.](https://patchstack.com/database/vdp/equal-height-columns)

## Reviews

![](https://secure.gravatar.com/avatar/3ee882312453ee83c97231cc36fce044bd630edcd639734e810a7feda1fd663e?
s=60&d=retro&r=g)

### 󠀁[Does the job](https://wordpress.org/support/topic/does-the-job-860/)󠁿

 [B Eades](https://profiles.wordpress.org/brenteades/) December 29, 2021

I had it working fine on some fairly complex Elementor layouts in no time, which
saved me doing a whole lot of custom CSS. Works exactly as advertised.

![](https://secure.gravatar.com/avatar/06f78db1493930411146bf9cac9ea31d53afaeacac714101acd183eb44ecc6e0?
s=60&d=retro&r=g)

### 󠀁[Works great! awesome..](https://wordpress.org/support/topic/works-great-awesome-3/)󠁿

 [ANW](https://profiles.wordpress.org/allnicheworld/) August 16, 2021

Thank you very much for the developed Equal Height Columns plugin…

![](https://secure.gravatar.com/avatar/df37122590ae7bad7b4b32fbc87b48a10666311f1ff7d75c3ca2a70e263ae361?
s=60&d=retro&r=g)

### 󠀁[Didn’t work for me](https://wordpress.org/support/topic/didnt-work-for-me-163/)󠁿

 [luizzle](https://profiles.wordpress.org/luizzle/) September 9, 2020

Unfortunately, nothing happened

![](https://secure.gravatar.com/avatar/f0f867525bf03ba3550be106e296ac882b553ae9978efb9032e6f8d224793d2c?
s=60&d=retro&r=g)

### 󠀁[Great plugin, You saved my life](https://wordpress.org/support/topic/great-plugin-you-saved-my-life/)󠁿

 [taras21777](https://profiles.wordpress.org/taras21777/) May 28, 2020

I was trying to fix my columns using flex, but initial theme styles + pagebuilder
makes it so unclear… THANKS YOU SOOOOOOOOOOOO MUCH

![](https://secure.gravatar.com/avatar/b2df36ba69801a87f6bbc2393ab7d6e3d2724c56017651df3e8bfcbf890f3452?
s=60&d=retro&r=g)

### 󠀁[Great!](https://wordpress.org/support/topic/great-9003/)󠁿

 [VerzameldNieuws2016](https://profiles.wordpress.org/verzameldnieuws2016/) December
27, 2018

This is really a great plugin. However, not tested with current Wordpress…

![](https://secure.gravatar.com/avatar/9c5433b42ddf08da422927b75f769d54d24d4a3a7ba473ab84e3957d236612f9?
s=60&d=retro&r=g)

### 󠀁[MAGIC…WOW!!!](https://wordpress.org/support/topic/magic-wow/)󠁿

 [bngari](https://profiles.wordpress.org/bngari/) July 5, 2018

What a life saver

 [ Read all 41 reviews ](https://wordpress.org/support/plugin/equal-height-columns/reviews/)

## Contributors & Developers

“Equal Height Columns” is open source software. The following people have contributed
to this plugin.

Contributors

 *   [ MIGHTYminnow ](https://profiles.wordpress.org/mightyminnow/)
 *   [ Braad ](https://profiles.wordpress.org/braad/)
 *   [ Mickey Kay ](https://profiles.wordpress.org/mcguive7/)

“Equal Height Columns” has been translated into 2 locales. Thank you to [the translators](https://translate.wordpress.org/projects/wp-plugins/equal-height-columns/contributors)
for their contributions.

[Translate “Equal Height Columns” into your language.](https://translate.wordpress.org/projects/wp-plugins/equal-height-columns)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/equal-height-columns/),
check out the [SVN repository](https://plugins.svn.wordpress.org/equal-height-columns/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/equal-height-columns/)
by [RSS](https://plugins.trac.wordpress.org/log/equal-height-columns/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

### 1.2.1

 * BUGFIX: Manual call to .initEqualHeights() was not working with recent jQuery
   versions.

### 1.2.0

 * NEW: Added multi-rows feature (javascript only).

### 1.1.4

 * Fire again Equal Height Columns if an image is lazy loaded inside the selector.

#### 1.1.3

 * Fix PHP warning.

#### 1.1.2

 * Update version number of the main javascript file to force clearing cache.

#### 1.1.1

 * BUGFIX: The plugin was not working with WordPress 5.6 due a jQuery update incompatibility.

#### 1.1.0

 * Add new method `equalizeTheHeights()` to allow direct equalizing of the heights
   without involving events
 * Better code formatting and usage examples in the block comments
 * Add new filter `equal_height_columns_elements`

#### 1.0.3

 * Fix JS error on activation (Uncaught TypeError: Cannot use ‘in’ operator to search
   for ‘length’ in…)

#### 1.0.2

 * Only load admin JS on EHC settings page
 * Make admin settings wrapper class and jQuery more specific to avoid potential
   conflicts

#### 1.0.1

 * Improve admin (Mm)

#### 1.0.0

 * First release

## Meta

 *  Version **1.2.1**
 *  Last updated **3 weeks ago**
 *  Active installations **10,000+**
 *  WordPress version ** 3.5 or higher **
 *  Tested up to **6.9.4**
 *  Languages
 * [Dutch](https://nl.wordpress.org/plugins/equal-height-columns/), [Dutch (Belgium)](https://nl-be.wordpress.org/plugins/equal-height-columns/),
   and [English (US)](https://wordpress.org/plugins/equal-height-columns/).
 *  [Translate into your language](https://translate.wordpress.org/projects/wp-plugins/equal-height-columns)
 * Tags
 * [column](https://test.wordpress.org/plugins/tags/column/)[div](https://test.wordpress.org/plugins/tags/div/)
   [element](https://test.wordpress.org/plugins/tags/element/)[equal](https://test.wordpress.org/plugins/tags/equal/)
   [height](https://test.wordpress.org/plugins/tags/height/)
 *  [Advanced View](https://test.wordpress.org/plugins/equal-height-columns/advanced/)

## Ratings

 4.9 out of 5 stars.

 *  [  40 5-star reviews     ](https://wordpress.org/support/plugin/equal-height-columns/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/equal-height-columns/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/equal-height-columns/reviews/?filter=3)
 *  [  1 2-star review     ](https://wordpress.org/support/plugin/equal-height-columns/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/equal-height-columns/reviews/?filter=1)

[Add my review](https://wordpress.org/support/plugin/equal-height-columns/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/equal-height-columns/reviews/)

## Contributors

 *   [ MIGHTYminnow ](https://profiles.wordpress.org/mightyminnow/)
 *   [ Braad ](https://profiles.wordpress.org/braad/)
 *   [ Mickey Kay ](https://profiles.wordpress.org/mcguive7/)

## Support

Got something to say? Need help?

 [View support forum](https://wordpress.org/support/plugin/equal-height-columns/)

## Donate

Would you like to support the advancement of this plugin?

 [ Donate to this plugin ](http://mightyminnow.com)