Identical Column Lengths (update)

Support
#1

Hi There,

I just reviewed the site in question on my phone’s browser this morning and noticed that the identical column lengths is not working in the horizontal view (i’m guessing 481-767 breakpoint).

The columns are chopping off at a certain size that doesn’t fit the largest image and text, which seems to go against the description within the solution that states all columns will be resized according to the longest length.

Just wondering what the solution for this is.

Thanks again!

#2

Hey there,

Thanks for writing in! Try replacing your script with the following one:

jQuery ( function($) {

function set_equal_height () {
        var max = 0;
	$(".equal-height .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).outerHeight();
		}
	});
	$(".equal-height .x-column").css('min-height', max);
}

$(window).on('load resize', set_equal_height );
$(document).ready( set_equal_height );

});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#3

Hi,

Thanks for your quick response!

The code works great on mobile however after clearing the cache on the desktop browser, the matched heights no longer work for the other breakpoints.

Any ideas?

Thanks again,

Chris

#4

Hi again,

I checked your site and I see you’ve not copied the entire code which is triggering an error. try replacing the code again.

Let us know how this goes!

#5

Hi there,

Sorry I missed that - I’m juggling two sites and must have not copied the first line :hushed:

I’ve cleared the cache on the desktop browser, and I’m still seeing that there is issue with one of the four columns not matching in length (the one with Shlomo Arigato).

What’s the easiest way to adjust this?

Cheers,

Chris

#6

Hi Chris,

How do you test the columns? Do you just resize browser? Make sure you refresh it, so the code will re-run and re-calculate the height of your tallest columns.

And it would be best if you make the feature images the same size or same aspect ratio, so they respond uniformly. The featured image for SHLOMO ARIGATO is bigger than other and the one for WOKS OF LIFE is smaller.

Thanks,

#7

Hi There,

As I said in the above post:

"I’ve cleared the cache on the desktop browser, and I’m still seeing that there is issue with one of the four columns not matching in length (the one with Shlomo Arigato).

What’s the easiest way to adjust this?"

I understand that the image size of Shlomo Arigato is larger, hence why I am hoping to have the other columns adjust to this as stated previously in this thread.

Thanks!

Chris

#8

Hello Chris,

I am another staff checking in. At first the columns were not in the same height. As soon as every thing is loaded, the script kicks in and all the columns were having the same height already. This is how I see your site now:

Please try using private browsing mode or Chrome’s incognito mode and test your site again.

#9

Hi there,

Thanks for checking into this.

I cleared the cache, opened in incognito mode and checked the site.

Unfortunately it has the same error - strange!

I reviewed in Firefox and it also didn’t display correctly.

I then checked on a second computer here and had the same error…

Any ideas?

#10

Hello There,

I have updated the JS code into this:

jQuery ( function($) {

function set_equal_height () {
        var max = 0;
	$(".equal-height .x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).outerHeight();
		}
	});
	$(".equal-height .x-column").css('min-height', max);
}

$(window).on('load resize', set_equal_height );
//$(document).ready( set_equal_height );

});

Please check your site now.

#11

Hello again,

Well this is a strange one…

When working within X’s editor in the browser, it displays as all even sized as hoped for.

When viewing it with a cleared cache in chrome using both regular and incognito mode in chrome, the shlomo column is still longer than the others.

Is there a reason this might be happening?

Thanks again for all your help!

#12

Hi There,

There is a JS error on your site, it could be conflicting the script.



I know you already cleared your caching, but please clear it again and Deactivate it for a while (also your browser cache, clear it again).

Then do a testing for a plugin conflict. You can do this by deactivating all third-party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

If that does not work, you might need to restructure your section (equal-height), as what I am seeing now, you have 6 Rows, with multiple columns on that section and might complicate the script calculation.

Use the code (CSS or JS) provided here, I just tested it and it works smoothly.

Cheers,

#13

Hi!

Thanks for taking the time to look into this.

I’ll try the steps above and see what the culprit is here…

#14

You’re most welcome and let us know. Thanks!

#15

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