Align paragraphs inside columns

[aa2zz6]

I am trying to get my pictures to align correctly underneath my paragraphs but I can’t seem to get it right. I figured if I can get the paragraphs above the images to have the same bottom padding or margin it’ll make the images align correctly for all 3 columns.

I tried using this column align css and js example in this xtheme post -https://theme.co/apex/forums/topic/make-columns-same-height-in-cornerstone/

• but when I change out the .x-column for for paragraph’s assigned class “Column_Paragraph_2” it doesn’t seem to work.

Example Edited version -

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

[ruenel]

Hello There,

Thank you for the very detailed post information. To resolve this issue, please edit the page back in Cornerstone and in the custom js section, Custom JS and insert the following custom js code

(function($){
	$(window).on('load resize', function(){
		var max = 0;
		$("#x-section-2 .Column_Paragraph_2").each(function(index, el) {
			if( $(this).height() > max ){
				max = $(this).height();
			}
		});
		$("#x-section-2 .Column_Paragraph_2").css('height', max);
	});
})(jQuery);

If you need anything else we can help you with, don’t hesitate to open another thread.

[aa2zz6]

Hi RueNel, thanks for the help. It works!

[friech]

We are delighted to assist you with this.

Happy Holidays, Cheers!

[aa2zz6]

I don’t know much about js but for some reason when I switch the web browser onto another monitor the 1 column is not aligned like the 2. It does the same when I use the xtheme device changer.

[rad]

Hi there,

You may do the same with the above javascript but with Column_Paragraph_1. Example,

(function($){
	$(window).on('load resize', function(){
		var max = 0;

		$("#x-section-2 .Column_Paragraph_2").each(function(index, el) {
			if( $(this).height() > max ){
				max = $(this).height();
			}
		});
		$("#x-section-2 .Column_Paragraph_2").css('height', max);

                var max2 = 0;

		$("#x-section-2 .Column_Paragraph_1").each(function(index, el) {
			if( $(this).height() > max2 ){
				max2 = $(this).height();
			}
		});
		$("#x-section-2 .Column_Paragraph_1").css('height', max2);

	});
})(jQuery);

Hope this helps.

[aa2zz6]

When I added the js it seems to overlap my 2 paragraphs and when the screen size is set to mobile the text overlaps the images too

[ruenel]

Hello There,

Please revert to this code:

(function($){
	$(window).on('load resize', function(){
		var max = 0;
		$("#x-section-2 .Column_Paragraph_2").each(function(index, el) {
			if( $(this).height() > max ){
				max = $(this).height();
			}
		});
		$("#x-section-2 .Column_Paragraph_2").css('height', max);
	});
})(jQuery);

And then add this custom css in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.Column_Paragraph_1 {
  min-height: 44px !important;
}

Hope this helps. Please let us know how it goes.

[aa2zz6]

I keep getting 2 out of 3 aligning correctly. Would there be an easier approach to getting the pictures to align instead?

[rad]

Hi there,

It’s like this, the image is being pushed by the content above it, and the content above it is being pushed by the title. Hence, to align the image then you still need the code for the title and content alignment.

I removed this CSS,

.Column_Paragraph_1 {
  min-height: 44px !important;
}

Then added my provided code, but instead of using height, I use minimum height. Setting the height will make it fix and will set the condition if( $(this).height() > max ){ to false. It should be okay now.

Thanks!

[aa2zz6]

Thanks, Rad, I appreciate the help.

[ruenel]

You’re welcome!
We’re glad we were able to help you out.