height testing

by Ash

HTML

<div class="product-wrapper contain">
		

		<div class="news-box contain">
			<img alt="" src="http://placehold.it/500x200" />
			<p>djfskal;jf dksajf lk;sa fjklsa fj;lkasdjfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkasdjfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas</p>
			
		</div>
		
		<div class="news-box contain">
			<img alt="" src="http://placehold.it/500x200" />
			<p>djfskal;jf dksajf lk;sa fjklsa fj;lkasdjfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas</p>
			
		</div>
		
		<div class="news-box contain">
			<img alt="" src="http://placehold.it/500x200" />
			<p>djfskal;jf dksajf lk;sa fjklsa fj;lkasdjfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas</p>
			
		</div>
		
		<div class="news-box contain">
			<img alt="" src="http://placehold.it/500x200" />
			<p>djfskal;jf dksajf lk;sa fjklsa fj;lkasdjfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas djfskal;jf dksajf lk;sa fjklsa fj;lkas</p>
			
		</div>	
	</div>

CSS

* {
    box-sizing: border-box;
}

.news-box {
    width: 25%;
    float: left;
    border: 1px solid red;
}

.news-box p {  
   padding: 10px;
}

.news-box img {
    width: 100%;
    height: auto;
}

JavaScript

// Fire the function on window resize
$(window).on('resize',matchHeight);

// Set up function
function matchHeight() {

	// If the window width is tablet or desktop
   if ($(window).width() > 767 ) {
   	
      // Reset the height for resize
      $('.news-box p').css('height','auto');
      
      // Set a base value
      var setHeight = -1;
      
		// Work out the height
      $('.news-box p').each(function() {
         setHeight = setHeight > $( this ).height() ? setHeight : $( this ).height();
      });
		// Set the height
      $('.news-box p').each(function() {
         $( this ).height(setHeight);
      });
   }
   else if ($(window).width() < 767) {
   
   	// Set height to auto if mobile veiw
      $('.news-box p').css('height','auto');
   }
}matchHeight();