Multiple same height columns on one page

[INcroatia]

Hi X,
I’m having some issues with same height columns.
We have a number of places that we want same height columns. We’ve been able to do some pages and section but we’re reallllly struggling with the Masterclass Pricing chart. Here is the page: http://dev.hyperbitsmusic.com/masterclass/
It’s near the bottom. Ultimately we’d like the chart to look like http://dev.hyperbitsmusic.com/services/ where the line is near the bottom.

NEEDS HELP: /masterclass/
LOOKS GOOD: /services/
Looks good EXCEPT when we try to move the line right above the button just like “services”: /start-to-finish/

I am unable to add more links otherwise I can’t send the topic… all links are at the same url.

So this layout is the goal:

We also have a few sections and global blocks that use the .equalize class so often there are two or three equalize classes on one page (for example .equalize-serik or .equalize-pricing)
I’ve also tried both methods on this X theme tips but still can’t nail it.
xthemetips /create-columns-equal-heights/286/

this is what I have, Global CSS… and I’ve tried Page CSS
.equalize .x-img {
display: flex;
margin-bottom: 0;
overflow: hidden;
}

.equalize .x-img img {
max-width: 1200px;
}

then here are the steps I did.
#1] I added a custom “equalize” class for the row… or whatever the correct name was (like equalize-serik)
#2] I inserted the custom headline, text and button in the column
#3] I added this JS code in the settings tab, Settings > Custom JS

/* Make columns equal height */
(function($){
$(window).bind(‘ready load resize’, function(){
var max = 0,
mobile = $(window).width();

$(".equalize .x-column").css('height', 'auto');
if ( mobile > 767 ){
  $(".equalize .x-column").each(function(index, el) {
    if( $(this).height() > max ){
      max = $(this).height();
    }
  });
$(".equalize .x-column").css('height', max);
}

});
})(jQuery);

#5] Lastly, I position the buttons to be always at the bottom of the column using this css in the settings tab, Settings > Custom CSS

@media(min-width: 768px){
.equalize .x-column {
position: relative;

}

.equalize .x-column .x-btn{
position: absolute;
bottom: 0;
}

.equalize .x-column .x-text{
padding-bottom: 50px;
}
}

What in the world am I missing? thanks so, so much!

[ruenel]

Hello There,

Thanks for posting in. To resolve your issue, please make use of this JS code instead:

(function($){
  $(window).on('load resize', function() {

    $(".x-container").each(function(index, el) {
	  var max = 0;
	  $(this).find(".x-column").css('min-height', 0);
	  $(this).find(".x-column").css('height', 'auto');

	  $(this).find(".x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	  });
	  $(this).find(".x-column").css('min-height', max);
    });

  });
})(jQuery);

We would loved to know if this has work for you. Thank you.

[INcroatia]

Unfortunately it didn’t work… or change much. But I’m also not entirely sure that I added it correctly. I tried adding it to the page as well as globally.

[lely]

Hi There,

I am able to check. The code is working on your masterclass page. The columns has equal heights. It seems not because you have added those gray background and border to the box element (which comes from a another plugin?). Now if you will add those background and border on the column it will appear as you wanted. What happening is, the columns has equal height but of course the content inside doesn’t and it emphasize because of the border and background.