Same Column Height

Hey there,

I tried following this guide https://theme.co/apex/forum/t/code-snippet-make-all-columns-equal-height/272 to make all my columns the same height but nothing happens when I add the code.

I did replace the section number to reflect my page. Any idea what could be causing that? It’s for the moveu.com website.

Thanks!

Ann

Hi Ann,

I have checked your site but and the section with three columns seem to already have equal height.

Would you mind pointing out specifically which section you are trying to target in case we missed it?

Thank you.

Hey,

Sorry! I’m working on a new page: https://moveu.com/home-draft/

The columns are in the first section.

Thanks!

Hi there,

The page that you are working on seems to be a draft which is not accessible unless we are logged in.

Would you mind providing the admin details to your site so that we can check the page?

Thank you.

Ohh sorry!

I thought it would work. I’ll send login in a secure note.

Thanks !

Hello There,

Thanks for providing the information. To resolve this issue, please make use of this code instead:

(function($) {
  $(window).on('load resize', function(){
    var max = 0;
    $(".el48 .x-column").css('height', 'auto');
    $(".el48 .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max ){
            max = $(this).outerHeight();
        }
    });
    $(".el48 .x-column").css('min-height', max);
  });
})(jQuery);

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

Worked perfectly!

Thanks so much!

On behalf of my colleague, you’re welcome. Cheers!

Hey guys,

Somehow this code is not working anymore. Not sure what happened, the columns are still in the same place :frowning:

Thanks,

Ann

Hey Ann,

I checked your page https://moveu.com/home-draft/ but it doesn’t exist anymore, did you remove it? Can you please share the new URL of your page so we can take a look?

Thanks!

We used this for our page:

(function($) {
$(window).on(‘load resize’, function(){
var max = 0;
$(".el26 .x-column").css(‘height’, ‘auto’);
$(".el26 .x-column").each(function(index, el) {
if( $(this).outerHeight() > max ){
max = $(this).outerHeight();
}
});
$(".el26 .x-column").css(‘min-height’, max);
});
})(jQuery);

is there a way to get it to load quicker? I don’t want people to see the column switch.

We are using pro on www.ipplesofgrace.com/visionandvalues

Hey,

Sorry! It was set as a draft. It’s published now again.

Ann

Hey Ann,

Thank you for providing the URL. Please replace the previous code with the following code:

(function($) {
  $(window).on('load resize', function(){
    var max = 0;
    $(".el56 .x-column").css('height', 'auto');
    $(".el56 .x-column").each(function(index, el) {
        if( $(this).outerHeight() > max ){
            max = $(this).outerHeight();
        }
    });
    $(".el56 .x-column").css('min-height', max);
  });
})(jQuery);

Section’s class was changed to el56 that’s why the previous code didn’t work. For future reference if you find the code not working again, inspect your page using chrome’s developer’s tool > find your section > find it’s class and replace the class with the new one

Hope this helps!

Ugh that’s embarrassing, I’m sorry! I should’ve figured that out.

Thanks guys!

Glad we could help.

Cheers!

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