Equal column height for each row – Genesis Columns

Sure thing. If you’re okay with ALL columns being the same height, then just use .one-half as your selector. Otherwise you’ll need to write some jQuery to loop through these guys in groups of two, or simpler yet, to wrap every two columns in a container div (which is really best practice that Genesis doesn’t follow) and then use that to target your specific columns.

If you dig into the code, and want to go for the more involved solution, you’ll want to use the initEqualHeights(), looping through each set of column pairs and calling the function on them independently.

Hi there,

I am working on a similar thing. Basically I have many elements and I want to make sure that only each set of three is “equlized”. It turns out to be very tricky!
I actually have a feature request! It would be amazing if we can specify the amount of elements that we want to equalize respectively define the amount of elements in a set.

Just imagine you have 6 boxes but they break in a responsive layout into either 3, 2 or 1 element per row. This is a very common scenario! Now they will simply all have the same height, which can easily look odd when elements break into the next row and still have the same height like the highest element of the first row.
So ideal would be if I can define to equalize a set of 3 with – let’s say – a break point of 960 and a set of 2 with a break point of 800.

To not make it too complicated I started with trying to only equalize every set of 3. Unfortunately your plugin does not seem to work with this.

// every three boxes for breakpoint 960
	var divs = $("#people-list div.box");
	for(var i = 0; i < divs.length; i+=3) {
		divs.slice(i, i+3).initEqualHeights( null, null, 960 );
	}

I have tested it with just .css({‘border’ : ‘1px solid red’}) and it works but not with .initEqualHeights()

Any idea how to make this work?

Note: Wrapping them in rows is not a solution, simply because it is not responsive! It will cause an uneven layout when the width of the viewport forces boxes to break into the next row.

HI Sebastian,

This is a bit more complicated scenario, however one that you can still definitely use the plugin to address. First of all, you can specify the number of elements you’d like to select, since the plugin relies on jQuery selectors. So you can easily use an nth-child or nth-of-type style selector to accomplish simple count-based selections.

For your responsive requests, it’s a bit trickier, but essentially you just need to write your own custom jQuery to handle the resizing event as follows:

– Group elements into the correct number based on the break point
– Loop through these groups and call doEqualHeights() (see documentation) on the grouped elements
– Implement variants of this custom logic for each breakpoint

So, that’s the very top-level version. I’d love to map this out more for you however this is a pretty custom implementation that requires some more free time than I have at the moment ?? Sorry about that. That said, if you have ideas for improvements, I welcome PR’s: https://github.com/MIGHTYminnow/equal-height-columns/pulls

Thanks Mickey, for the pointer in the right direction.
I won’t be able to achieve that without putting days of work into this. I am not yet good enough in the jQuery logic and the deeper understanding of the syntax. I have only ever adjusted other people’s code or wrote very basic stuff by myself.

I tried the grouping elements with .slice(), which seemed to be the most sensible way, but the plugin does not seem compatible with it. Nth-child stuff does not really work well in this context. It makes much more sense to group elements based on “counting” and yes, as you say, according to break-points.

I wish I had a budget to hire somebody to take this to the next level. I think many people would appreciate it.
What do you think would be the budget for such an update? I am talking about the jQuery functionality, not the wordpress plugin.

I just did another research on existing scripts and I found this:
https://github.com/liabru/jquery-match-height

It has the “row intelligence” already build in. Try it, it’s pretty good!
So for now I don’t need anything else. I am just using that one and see how far it get with that.

Thank you!