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

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!

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.

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!