Same Column Heights

Have you ever wondered how can you have the same column heights in your Cornerstone page layout? You will need a little bit of Javascript so that the columns will have the same heights. Please check out the examples below.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque eros eu pulvinar dictum. Nunc egestas massa at elit bibendum, cursus fringilla nunc faucibus. Proin dignissim efficitur nunc a cursus. In luctus mi in nisi condimentum, sed ornare enim tempor.

Proin dui metus, fringilla ut viverra id, consequat nec ex. Curabitur consequat sem ac ipsum tincidunt, vel vehicula arcu euismod. Donec pellentesque turpis sed gravida pretium. Aliquam pulvinar eleifend rhoncus. Praesent aliquet aliquam pellentesque. Ut aliquam, risus sit amet luctus blandit, ligula est ullamcorper nulla, in gravida nisi augue vitae nisl.

Maecenas in erat magna. Vivamus in aliquet arcu.

Proin dui metus, fringilla ut viverra id, consequat nec ex. Curabitur consequat sem ac ipsum tincidunt, vel vehicula arcu euismod. Donec pellentesque turpis sed gravida pretium.

Ut aliquam, risus sit amet luctus blandit, ligula est ullamcorper nulla, in gravida nisi augue vitae nisl. Nam vitae porttitor sem, et porttitor massa.

Ut aliquam, risus sit amet luctus blandit, ligula est ullamcorper nulla, in gravida nisi augue vitae nisl.

Headline

Nam vitae porttitor sem, et porttitor massa.

The most common setting in Cornerstone for you to have equal column heights is to enable the marginless column options in the row settings. The problem with marginless columns is that there is no gap in between your columns. That is why, it is better to have the ordinary columns and just add a little Javascript to make the height of the columns be equal.

The Instructions


1] Upload the example templates as a block template. Or you can create your own section with your desired number of columns.

Reminders:
Please always remember to add the template as Block template layout.

2] Go to the Settings tab and insert the Javascript below.

The Javascript


(function($){
  $(window).on('load resize ready', function() {
    $(".x-section").each(function(index, el) {
    var max = 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('height', max);
    });
  });
})(jQuery);

You can always re use this JS code in other pages so that the other pages will have same column heights too. If you want to apply this code in your entire site, please insert the JS code in your customizer, or somewhere where it will be applied globally.

Leave a Reply

Your email address will not be published. Required fields are marked *