Make All Columns Equal Height

Hi Support

Does Following Code Snippet - Make All Columns Equal Height works fine with latest X releases?

How I have to change “#x-section-4” with?

Thank You

Hi there,

You can assign an ID to the section that contains the columns. You can do this by clicking on the customize option of the section then adding a value to the ID field.

Once you save the changes, you can then change #x-section-4 to the id you assigned to the section prepended with #.

Hope this helps.

Dear Jade

Thank You for your support.

On page:

I’ve inserted the suggested Code Snippet and inserted an ID #intro-gnomi.

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

But it doesn’t work.

Maybe because it is a “Classic Promo” Element?

Thank You

Hi There,

Yes the promo elements having different height inside the column. also the JS not getting the height to the columns.
Columns are also in different size.
To help you on this please send us your login details so that we can check why the JS code is not working.
Remember this code is for column not for the promo element.

Thanks

Hi,

This code (kind of) worked for me. It looks good on desktops and laptops. However on 768px-979px screens it doesn’t work.

Can you help?

Thanks!

Here enclosed login details

Thank You

Hi @silmicemi

It should be working now, I’ve added this JS snippet in (X > Theme Options > JS):

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

Then I’ve added this CSS snippet in (X > Theme Options > CSS):

.x-promo, .x-promo-content {
    height: inherit;
}

Thanks.

Thank You

Very Much

Sorry

Why it works only if I put code into X > Theme Options > JS/CSS
and it doesn’t work if I put that sam code into Page > JS/CSS ???

Thank You

Hey @silmicemi,

It is because the JS and CSS are not actually saved. This is a different issue. Please try contacting your host to increase your allocated memory or do it yourself by adding this code in your wp-config.php

define( 'WP_MEMORY_LIMIT', '256M' );
define( 'WP_MAX_MEMORY_LIMIT', '512M' );

If that does not help, please open a separate thread and put “Content JS and CSS not saving” in the title and give us WP Admin and FTP access in a Secure Note. Also state that you have tried testing for a plugin conflict.

Thanks.

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