EqualiZe Columns

Oasis · January 16, 2018, 12:18pm

Hello I have looked at a number of ways on the forum to do this but couldn’t get any of them to work for me. I want to equalise the columns I have on my homepage.

There are 3 columns:
Social Enterprise Activities, Training Programmes and Support Services.

Thanks in advance

christian · January 16, 2018, 1:16pm

Hey @Oasis,

The columns look equal. Please clear your browser’s cache or test in incognito.

Thanks.

Oasis · January 16, 2018, 1:42pm

Thanks Christian - they start of equal depending on the size of the window but as there is more text in the blue one they go out out sync. I want them to remain in equal size no matter the breakpoint/window size

Joao · January 17, 2018, 1:38pm

Hi There,

Seems like you addded the ID equalise to your Section, ROW and Column.

Note that IDs cannot be repeated.

Please remove the ID names from your rows and columns since ID can be used just one time per page (classes can be used multiple times)

I believe you tried to go for this solution , which is adding the following code to Cornerstone > JS

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

Once you have fixed the mistake described above it should work.

If not, please provide your login credentials in a secure note so we can take a closer look.

Thank you!

Oasis · January 17, 2018, 11:01am

Thats Joao for your help.That was the approach I tried but I wasn’t sure what ID I should’ve been amending. I have now removed the IDs from everything but the Section.

It still didn’t work for me - maybe I missed an ID?

Thanks for your help

rad · January 17, 2018, 3:51pm

Hi there,

What you need to equalize are the content and not the columns. Let’s say you successfully equalized the columns, but the buttons will not be aligned since the content is smaller than other content. What you need to equalize is the content height, let’s do this

Please remove this code from your builder’s custom javascript, it triggers javascript error.

var topOffset = $('.x-slider-container.above').offset().top;

    $(window).scroll(function () {
        if($('.x-slider-container.above').is(':visible')) {
            if($(this).scrollTop() >= topOffset){
                $('.x-slider-container.above').hide();
                window.scrollTo(0, 0);
            }
        }
    });

Or if you wish to retain that and just need to fix the error, then replace it with this

jQuery ( function($) {
var topOffset = $('.x-slider-container.above').offset().top;

    $(window).scroll(function () {
        if($('.x-slider-container.above').is(':visible')) {
            if($(this).scrollTop() >= topOffset){
                $('.x-slider-container.above').hide();
                window.scrollTo(0, 0);
            }
        }
    });
} );

Then change your javascript for equal height content

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

Then simply wrap your content with this code

<div class="equal-content-height"></div>

Examples,

<div class="equal-content-height">

<p><span style="color: #ffffff"><b>Our SEA include:</b><br> </span></p>
<p><span style="color: #ffffff">Online Retail Shop – Candyrush<br>Packaging and Assembly<br>Sample Making<br>Lunchbox Café<br>Allotments and Market Garden<br>Clearer Water Bottling<br>Plant Groundworks<br>Facility Hire</span></p>

</div>

<div class="equal-content-height">

<p><span style="color: #ffffff"><b>Transitions Programme</b></span><br><span style="color: #ffffff"><em>(School pupils aged 16-25)</em></span></p>
<p><span style="color: #ffffff">Hands On Training Programme</span><br><span style="color: #ffffff"><em>(unemployed aged 16 – 60)</em></span><br><br><span style="color: #ffffff">Day Opportunities</span><br><span style="color: #ffffff"><em>(aged 16 – 60 referred through NHSCT)</em></span></p>

</div>

<div class="equal-content-height">

<p><span style="color: #ffffff">Self-Directed Support/Direct Payments<br><br>Volunteering Opportunities<br><br>Support for Employers</span></p>

</div>

And with this, you must remove the <br> elements that you added before the buttons since the equalized height content will now push your buttons down, perfectly aligned.

Hope these help.

Oasis · January 17, 2018, 4:14pm

Hi Rad

I couldn’t find the code you mentioned in #1 - it doesn’t appear in my Javascript Editor;

#2 didn’t seem to work for me either… I wrapped the code and inserted the JS but still nothing

Thanks for trying though

ruenel · January 17, 2018, 8:34pm

Hey There,

Thanks for updating in!

1.) You will need to edit the page in Cornerstone. You can find this code in the Cornerstone custom JS section.

2.) When #1 is replace, the JS error will be gone. This error has affected the code in #2 which is why the equal height code is not working.

Please let us know how it goes.

Oasis · January 18, 2018, 8:32am

Great, I got the JS removed but that still has not solved my equalising problem Maybe I’ve missed something…

Thanks for your help so far

rad · January 18, 2018, 1:19pm

Hi there,

First, you shouldn’t wrap your buttons along with equal heights. The purpose of that code is to equalize the content height and to push button for alignment. Please move your button outside the <div class="equal-content-height"></div>. Please check the sample as provided, there is no button

As for the javascript, I forgot to change the last selector, please update it to this

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

Thanks!

Oasis · January 18, 2018, 3:42pm

Thanks for that. It’s definitely working better but still not quite right - the left column is still longer when squeezed by screen width - maybe I’m still making an error when wrapping content with code?

My theory is that the headlines in each column are up setting it as they responsively move on to two lines as the column gets narrower.

rad · January 18, 2018, 4:47pm

Hi there,

In that case, please update your code to this. The code will only work upon load, so this one should work on resize too.

jQuery( function($) {

function set_equal_content_height () { 

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

}

$( document ).ready( set_equal_content_height );
$( window ).resize ( set_equal_content_height );

} );

And please include your headlines within the wrapper, just leave the button outside the wrappers.

Thanks!

Oasis · January 19, 2018, 9:08am

Perfect Thanks so much

Joao · January 19, 2018, 3:58pm

Glad to hear it!

Cheers

system · January 29, 2018, 3:59pm

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