[DanielParticipant]

Hey there,

I’m trying to make my 3 columns all of the same height within my section. See here:

I know how to get this done in Visual Composer, but I’m new to Cornerstone. Is there a way to do this without custom CSS? I’m fine with throwing it in if necessary, but I just am curious if there is an easier way to make all columns within a row the same height.

Thanks!

URL: Website

[John EzraMember]

Hi there,

Thanks for writing in! In some cases, you can add height via style input box (becomes inline-style) or you could add it via the gap element. In your case since you are using Cards, and the part you need to add height to is within another element, you can only do it via CSS.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-card-inner {
    height: 441.406px!important;
}

Hope this helps – thanks!

[DanielParticipant]

Thank you so much! You guys are great.

[Rue NelModerator]

You are most welcome!
If there’s anything else, we can help you with, please let us know.

[DanielParticipant]

Actually, is there anyway to get general columns the same height? For instance, here is an image with almost the same problem, it just doesn’t have the cards anymore:

[ThaiModerator]

Hi There,

Thanks for writing in!

Try adding following Javascript under Appearance > Customize > Custom > Javascript:

jQuery(document).ready(function($) {
	var max = 0;
	$("#x-section-3 .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$("#x-section-3 .x-column").css('height', max);
});

Hope it helps.

[DanielParticipant]

It didn’t do anything unfortunately 🙁

[ThaiModerator]

Hi There,

Please update the code above a bit:

jQuery(document).ready(function($) {
	var max = 0;
	$("#x-section-4 .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$("#x-section-4 .x-column").css('height', max);
});

Let us know how it goes!

[DanielParticipant]

That did it! Thanks so much!

[DanielParticipant]

If I wanted to do this throughout my site, which piece of code would I alter? I noticed that you changed the 3 to the 4. I’d love to have this snippet of code in my back pocket for every row!

[Rue NelModerator]

Hello There,

If you want to apply throughout the site, you can use this code instead:

jQuery(document).ready(function($) {
  var max = 0;
  $(".x-section .x-column").each(function(index, el) {
    if( $(this).height() > max ){
      max = $(this).height();
    }
  });
  $(".x-section .x-column").css('height', max);
});

This code will apply to all columns within your sections. And it will have your columns of the same height even on smaller screens.

To have a more flexible and responsive approach, you can use this nifty script instead.

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

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

To apply it to your columns, you must first turn on the advance controls and add a custom equalize class to your section or row. This enables you to choose which section or row you have in the page to have an equal column heights. The code above changes the column heights as soon as you resize the page and it will only be applied on medium size and large screens.

Hope this helps. Kindly let us know.

[DanielParticipant]

Awesome! Is there anyway to get the second snippet of code to work on mobile as well? It’s working great on the large and medium screens, just like you said, but this is what I’m getting for mobile:

[ZeshanMember]

Hi there,

The columns are of the same height on all sreensizes, but the image changes its height on smaller screens (see: http://prntscr.com/7mqhix).
Thanks!

[DanielParticipant]

Good find. Is there anyway to fix this?

[ThaiModerator]

Hi There,

Try adding following CSS under Appearance > Customize > Custom > CSS:

#x-section-2 .x-column:nth-child(2) {
	padding-bottom: 25px !important;
}
#x-section-2 .x-column:nth-child(2) img {
	height: 100%;
	margin-bottom: 0;
}

Hope it helps.

[Author]

Posts