Using jQuery match height with a CSS Responsive grid

Question

I am using jQuery match height to make 3 boxes on my hope page have the same height. It works, but only upon page load. As I am using a CSS Responsive grid of 12 columns (Small, Medium and Large), when resizing the window the text squashes down to fit the width that I have given it, however, the newly adjusted boxes containing the text only maintain the height given to it by the jQuery.

Image 1: this is how it looks on page load, the boxes are the height of the highest box.

Image 2: this is how it looks after making the window smaller, see how the boxes are the same height but the text is still responsive.

How can I make the box resize with the text, whilst still having all boxes stay the same height? Thanks

 $(document).ready(function(){ var highestBox = 0; $('.home-card').each(function(){ if($(this).height() > highestBox) { highestBox = $(this).height(); } }); $('.home-card').height(highestBox); }); 

 .home-card { box-shadow: 1px 0 11px rgba(33,33,33, 0.2); padding: 5px; margin-top: 6px; /*width: 97%; float: none;*/ position: relative; left: 0.5%; } .home-card:hover { box-shadow: 1px 0 11px rgba(33,33,33, 0.4); } .home-card p, h2 { padding: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="column small-12 large-4 medium-12"> <div class="home-card"> <h2>Education</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut accumsan, mi a auctor varius, nibh metus aliquet nisl, sit amet aliquam massa ipsum vitae magna. Praesent sed quam felis. Phasellus pretium tempus sapien, eu interdum turpis ultricies quis. Nam dictum nisl et nulla scelerisque venenatis. Fusce sit amet aliquam. </div> </div> <div class="column small-12 large-4 medium-12"> <div class="home-card"> <h2>Education</h2> <p>Vestibulum eget sodales orci. Quisque non semper enim. Mauris suscipit malesuada nisi sit amet tincidunt. Aliquam quam arcu, imperdiet ut tortor a, rhoncus aliquam leo. Nam ullamcorper elit vitae porttitor semper. Praesent cursus id felis nec eleifend. Ut vel sapien eleifend, efficitur metus eget, lacinia leo. Fusce eu lacus pretium, pulvinar tellus vel, vestibulum dui. Nunc congue libero justo, at aliquet ipsum posuere scelerisque. Praesent nunc lorem, venenatis eu velit sed, volutpat efficitur sem. Integer nisi arcu, sodales eu dignissim et, sagittis in massa. Aenean fringilla ante sed elit convallis, ac ornare urna porta. Pellentesque vel diam luctus, accumsan metus eu, malesuada elit.</p> </div> </div> <div class="column small-12 large-4 medium-12"> <div class="home-card"> <h2>Education</h2> <p>Aenean a mi quis justo ultricies posuere nec vitae lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus nec felis ante. Nulla aliquet in augue id varius. Cras ut ligula a diam porta feugiat. Praesent dictum eros nisl, at interdum tellus suscipit vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p> </div> </div> 

Answer 1

How about in your javascript code you have this instead:

function load() {
    var highestBox = 0;

    $('.home-card').each(function(){
      if($(this).height() > highestBox) {
        highestBox = $(this).height();
      }
    });

    $('.home-card').height(highestBox);
}
$(document).ready(load);
$(window).resize(load);