Make 3 columns equal height

Good afternoon,

I have quite a few rows of 3 columns throughout my site and finding it impossible to make them all the same height once the width of the screen becomes smaller.

I tried to do it all via the gap element, hiding different ones on breakpoints but it is not working perfectly as it is a “breakpoint”

Here is a perfect example: https://www.mycareerswitch.com/evening-workshops/

Scroll down to the section with the title “How Can Attending Our Workshop Help You?” - make the width of the screen smaller and the columns start to go all out of line.

Would love some advice on this. will send login details via secure notes

Thank you

Hello @hyperdrive_boom,

Thanks for asking. :slight_smile:

To properly implement and have equal column heights I suggest you to please take a look at following article:

Thanks.

Good afternoon and thank you for this.

I believe I did this correctly but a error occurred:

Went to the row which has the 3 columns out of line (https://www.mycareerswitch.com/evening-workshops/) and added the “equal-height” to the rows class name.

I then went into “X/Pro > Theme Options > JS” and inserted the Javascript in.

Attached is what happened:

the text then poppped out of the boxes?? Did I do something incorrect? There is no other scripts running.

I have removed the script for now while you read this

Thank you,
Jason

Hi Jason,

It looks just fine on my end (https://i.imgur.com/x9TE0Er.jpg) I think you did not refresh the preview (to recalculate the column’s height) after you added the JS code. And I see you’re using a W3 Total Cache, please clear your caching plugins and browser’s cache.

How to clear W3 Total Cache’s Cache
Clear your web browser’s cache, cookies, and history

Cheers!

Good morning,

as mentioned in my post the script was making the text come out of the borders, so I took the screenshot to show you and then removed the script so clients will not see it broken like that.

Why when I put the script in the poppped out of the boxes?? Did I do something incorrect? There is no other scripts running.

Thank you for your time,
Jason

Hi Jason,

The reason why the column’s contents jump out their container when you resize the browser is because this script:

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

will only work on the initial load of the site. It sets a fixed height to the columns using the column with the largest height on the page. It does not keep track of the browser resize event.

Please check this link and scroll to the Method 2: JavaScript. The code in the link addresses the resize event.

Also, you might want to try the CSS Flex option as well.

Hope this helps.

Thank you very much for you help - in the end I went for this CSS angle which works well:

.equal-height {
  display: flex;
}

@media only screen and (max-width : 767px) {
   .equal-height {
  display: block;
}
}

Glad to know that!

Thanks

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