Same height columns

Support
#1

Hi…

I’m trying to do some sections with the same height so I can center the content inside these vertically. I used this https://theme.co/apex/forums/topic/make-columns-same-height-in-cornerstone/. It does make it the same height, but it calculates it to the 551px, which is huge. I don’t know why it calculates this height. Please help.

Thank you

#2

Hi There,

Please try with the flex layout solution:

Hope it helps :slight_smile:

#3

Hi There,

I would like to check your website, but it requires the authentication password. Could you please provide us with this username & password?

Thanks.

#4

It’s in the secure note…

#5

Hi @LixarCommunity,

Unfortunately, none of that work. It could be your WP Admin credentials, the credentials for that popup is different. Please contact WPEngine to see what’s your credentials for that popup.

Thanks!

#6

Sorry… It’s updated now. Please have a look in the secure note.

#7

Hi again,

Thank you for updating the credentials. It works now. I checked your setup and I see you’ve assigned the same class equalize to all of your sections and the script is assigning the max height from all the columns in those sections and assigning the height to all of your columns inside the class equalize so you need to assign different class to each of your section for example equalize_one to your first section, equalize_two to the second section and equalize_three to the third section and then try updating your code with the following one:

(function($){
  $(window).bind('ready load resize', function(){
    var max_one = 0, max_two = 0, max_three = 0,
        mobile = $(window).width();

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

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

	$(".equalize_three .x-column").each(function(index, el) {
        if( $(this).height() > max_three ){
            max_three = $(this).height();
        }
      });
      $(".equalize_three .x-column").css('height', max_three);
    }
  });
})(jQuery);

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#8

Thank you so much! It did work.

Can you please help me to vertical align elements inside the columns? Thanks in advance.

#9

Thanks… I resolved this :slight_smile: All good. Thank you so much for your help.

#10

Glad we could help.

Cheers!

#11

Sorry… I need to adjust the code and need some help.

I would like to have same hight columns only when my screen size is more that 767px.

Thanks.

#12

Hi again,

For the smaller screens, try adding the following code in the Theme Options > CSS:

@media screen and (max-width: 767px) {
    [class*="equalize"] .x-column {
        height: auto !important;
    }
}

Let us know how this goes!

#13

Thank you so mach! it works now :slight_smile:

#14

Glad we could help.

Cheers!

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.