Pro Equal Height Column - Content & Image v.1.2.3

Support
#1

Hi,
I am trying to create two columns, equal height with the latest versions of Pro. One column with content and one column with an image in the same row.

How can I get the image to match the height of the column containing the text element and do so responsively.

Example image attached.

Thank you,

#2

Hi There,

Please add the class same-height to each column and add the following code on Cornerstone > JS tab

You will find the JS tab on the very left thin Cornerstone tab.

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

Hope it helps

#3

Thank you.

#4

You’re always welcome!

Feel free to check our Knowledge Base. Under Code Snippets, you can see other codes that might help you in building your site and of course all other resources.

#5

Hi,

I have a similar question. I would also like to have columns of the same height, but in my case they’re both (mainly) text columns.

I added the code in the JS tab and added the class same-height to both columns, but it doesn’t seem to have any effect to my columns. Do you have any idea what I might be doing wrong?

Kind regards,
Roel

#6

Hi Roel,

There is a syntax error in the code.

Kindly change it to this.

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

Thanks

#7

Sorry for my late reaction, I just noticed your reply. Thank you for your reply!

That does work, but somehow the content (text and button) won’t stay in the columns when they get too narrow. For instance, when I resize the window the content of the right column will go below the bounds of the column.

Kind regards,
Roel

#8

Hey Roel,

Can you please share the URL of the page in question so we can take a look?

Thanks!

#9

Hi Nabeel,

The website is not yet live and at the moment the Under Construction plugin is still experiencing some problems with the password.

I’ll leave a temporary login and the URL in a secure note.

Kind regards,
Roel

#10

Hi there,

The login credentials aren’t working.

But, it’s only normal for columns to break into the single column when viewed on a smaller device like a tablet or mobile phones. It’s how responsive layout works.

Thanks.