Not new: Multiple same height columns on one page

Support
#1

Hi,
i tried 1 mio things and want get this run on the website below (hidden, cause developing):

Thanks,
Christian

The JS i used:

Summary

(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);

#2

Hey,

Please, can you explain your question with more details?

#3

Hi, I need all columns in same height. I used the code, you published. See inside the summary. But it doesn’t work at all…

See here: https://theme.co/apex/forum/t/multiple-same-height-columns-on-one-page/928/5

#4

Hello There,

Thank you for the clarifications. The JS code provided will have to make sure that the columns will have the same height. It is working in your site by the way. The only problem is that using the code will make your buttons align which it did not.

And that is because even if the columns have the same height, your column contents have different heights. You can only make your buttons align if you have the same number of words for the text elements. Or you will a minimum height for your text element by adding an inline css min-height: 75px; in the text element settings style field.

Hope this explain it briefly.