[OpmerkersParticipant]

Hi there,

I used the responsive code from https://community.theme.co/forums/topic/make-columns-same-height-in-cornerstone/#post-314832 to get my columns to match each others height. The code works great and I love it but now I have a bit of an issue when it comes to scaling my browser window. Ofcourse a regular user won’t keep increasing and decreasing the size of their window but since I’m building the website, I am and probably so will others. What happens can be seen in the added screenshots. At first (img1), everything is a-ok, not a problem. When I scale the browser window, the text will be pushed to more lines than before. The columns won’t grow with the needed space to fit the text. When I refresh the browser, everything snaps right back into place but it won’t automatically do that. Is there a way to tweak the code so it will do the scaling without having to press the refresh-button?

Using all the latest versions of WP, X and Cornerstone btw…

Thanks in advance!

[RahulModerator]

HI There,

Greetings!

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[OpmerkersParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

Thanks for providing the url. I could not see any columns on the page. It may be private and that is why I am not seeing it. Meanwhile, to have the same column heights within Cornerstone, please edit the page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

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

We would loved to know if this has work for you. Thank you.

[OpmerkersParticipant]

This reply has been marked as private.

[OpmerkersParticipant]

The code I’m using for the page I sent you in private is this:

jQuery(function($) {
    
function set_equal_height() {
     var highestBox = 0;
     $('#equalize1').children('.x-column.x-1-2').each(function () {

            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
     });  

     $('#equalize1').children('.x-column.x-1-2').height(highestBox);

}

$( document ).ready( set_equal_height );
$( window ).load( set_equal_height );
$( window ).resize( set_equal_height );

set_equal_height();

});

jQuery(function($) {
    
function set_equal_height() {
     var highestBox = 0;
     $('#equalize2').children('.x-column.x-1-2').each(function () {

            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
     });  

     $('#equalize2').children('.x-column.x-1-2').height(highestBox);

}

$( document ).ready( set_equal_height );
$( window ).load( set_equal_height );
$( window ).resize( set_equal_height );

set_equal_height();

});

[LelyModerator]

Hi There,

Please update the code to this:

jQuery(function($) {
    
function set_equal_height(sectionID) { 
     var highestBox = 0;
     $(sectionID).children('.x-column.x-1-2').each(function () {
         $(this).css('height', '100%');
            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
     });  

     $(sectionID).children('.x-column.x-1-2').height(highestBox);

}
$( document ).ready( function() {set_equal_height('#equalize1'); set_equal_height('#equalize2'); } );
$( window ).load( function() {set_equal_height('#equalize1'); set_equal_height('#equalize2'); }  );
$( window ).resize( function() {set_equal_height('#equalize1'); set_equal_height('#equalize2'); } );
  });

Since we already set the height, even on resize, it will still call this height we first set. Now on resize, we need to reset columns height to it’s default height 100% then recalculate the current height again. I did also, trimmed the code to just one function to make it clean. See implementation here:http://screencast-o-matic.com/watch/cbeQIm6xDd

Hope this helps.

[OpmerkersParticipant]

You, Lely, are a true hero(in)! It works, looks great! Just for my understanding of the trimmed function: if I had to add #equalize3 and #equalize4 the function would look like this right?

jQuery(function($) {
    
function set_equal_height(sectionID) { 
     var highestBox = 0;
     $(sectionID).children('.x-column.x-1-2').each(function () {
         $(this).css('height', '100%');
            if($(this).height() > highestBox) 
               highestBox = $(this).height(); 
     });  

     $(sectionID).children('.x-column.x-1-2').height(highestBox);

}
$( document ).ready( function() {set_equal_height('#equalize1'); set_equal_height('#equalize2'); set_equal_height('#equalize3'); set_equal_height('#equalize4'); } );
$( window ).load( function() {set_equal_height('#equalize1'); set_equal_height('#equalize2'); set_equal_height('#equalize3'); set_equal_height('#equalize4'); }  );
$( window ).resize( function() {set_equal_height('#equalize1'); set_equal_height('#equalize2'); set_equal_height('#equalize3'); set_equal_height('#equalize4'); } );
  });

Thank you very much for your help!

[ThaiModerator]

If you need anything else please let us know.

[OpmerkersParticipant]

Just one more thing: I have quite a few pages using this function and the amount of “#equalize..” differs per page. Sometimes one, sometimes 2 etc. On every page I put the function in the custom js. Is there a way to put the function in functions.php once so it can be used on all the pages?

[JoaoModerator]

Hi There,

Please try adding the code on Appereance > Customizer > Custom > Javascript.

Let us know how it goes,

joao

[OpmerkersParticipant]

I don’t appear to get any errors in my console and at the front-end everything looks great, so I take it’s working fine. Thanks!

[JadeModerator]

You’re most welcome.

[Author]

Posts