Docs

[Gallardooo]

Hi, I would like to make my two pairs of columns (the blue and the grey) have the same height as their pair in their respective row. For example, both blue columns have the same height and both grey columns have the same height as well. I was wondering if you knew how to accomplish this?

My URL (I would like to apply this only on this page)

Thank you

[Joao]

Hi There,

You can add min-height: 200px; to the style box of each column.

Change 200px for the desired height.

Hope it helps

Joao

[Gallardooo]

Thank you for your response. I tried the solution above but it didn’t solve the issue since once the display screen size is changed the columns no longer look good and uniformly laid out.

Is there any way to use a flex box solution that allows to maintain the columns in the same row the same height while also maintaining their content centered horizontally? Or any other similar solution to accomplish this?

My URL (would like to apply it only to this page)

Thank you

[Lely]

Hello There,

Please add the following code on Appearance > Customize > Custom > Edit Global JS:

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

Then add section-same-col-height on the class field of the section where those columns are located. The code will get the maximum height of the columns on that section and then apply to each and every column.

Hope this helps.

[Author]

Posts