javascript - resize divs to auto and then to same height as one another upon window resize? -

i have 3 column divs resize same lenghth. have been able upon page load executing following function (which found on though unfortunately unable find give attribution, update if can find it):

function resizeit() {    var largest = 0;  $(".feature").each(function(){ //loop through each section    var findheight = $(this).height(); //find height     if(findheight > largest){ //see if height greater "largest" height       largest = findheight; //if greater, set largest height 1    } });  $(".feature").css({"height":largest+"px"}); } 

this works fine, want divs resize each time window resizes. modified function , call each time window resizes , call function upon page load. here modified function (first line of function addition) plus function call window resize:

function resizeit() { $(".feature").css({"height: auto"});  var largest = 0;  $(".feature").each(function(){ //loop through each section    var findheight = $(this).height(); //find height     if(findheight > largest){ //see if height greater "largest" height       largest = findheight; //if greater, set largest height 1    } });  $(".feature").css({"height":largest+"px"}); } resizeit();     $(window).resize(function(){ resizeit(); }); 

now div's not resize upon page load or upon page resize. nothing happens @ all. if put kind of alert in function, not called when

$(".feature").css({"height: auto"}); 

line included in function. why line breaking code? object exist when call on first line, it's not null object.

why not try resizing media queries? allow divs resize upon window resizing without need page reload

@media (max-width: 1200px) { .feature { /*new height value*/ /*new width value*/ } } @media (max-width: 767px) { .feature { /*new height value*/ /*new width value*/ } }