How to make different column heights in different rows

Nevermind – I think I’ve solved it through trial and error (chalk one up for sheer stubbornness). In case anyone else has this problem: I created a new CSS class (in this case called “.short”) and added it to the div surrounding the entire section with the rows/columns (which already had a class of “.four” being applied via the shortcode) which I wanted to be a different height from the rest. Then I created a new group in the EHC settings with the selector for both classes (“.short .four “). Whew!

Forgot to mark this one resolved.

Your explanation sounds pretty complicated. I don’t understand it at all ??

This is what I tried:

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!

Just imagine you have 6 boxes but they break in a responsive layout into either 3, 2 or 1 elements 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 the 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?