ore-test equal heights on three elements

by ian_smithz

HTML

<link rel="stylesheet" href="https://www.screwfix.com/assets/css/sfx.min.css">
<link rel="stylesheet" href="https://www.screwfix.com/images/general/assets/css/ore-2018-test.css">
<script>
document.addEventListener("DOMContentLoaded", function() {

  var equalHeight = function(container){

  var currentTallest = 0,
       currentRowStart = 0,
       rowDivs = new Array(),
       $el,
       topPosition = 0;
   $(container).each(function() {

     $el = $(this);
     $($el).height('auto')
     topPostion = $el.position().top;

     if (currentRowStart != topPostion) {
       for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
         rowDivs[currentDiv].height(currentTallest);
       }
       rowDivs.length = 0; // empty the array
       currentRowStart = topPostion;
       currentTallest = $el.height();
       rowDivs.push($el);
     } else {
       rowDivs.push($el);
       currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
    }
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
   });
  }
  
  var winSize = window.innerWidth;
  
  // om page load - run main function on specific element (e.g. h4 inside .hover content div)
  
  if (winSize > 1024) {
    //equalHeight($(".equal2"));
    //$('.equal2').equalHeight();
    equalHeight('.equal2');
  } else {
   $(".equal2").css("height", "auto");
  }

  if (winSize > 640) {

    equalHeight('.hover-content h4');
    equalHeight('.landingpage_documentsafes .mt__item-title');
    equalHeight('.landingpage_shopbybrand .mt__item-title');

/*    $('.landingpage_documentsafes .mt__item-title').equalHeight();
    $('.hover-content h4').equalHeight();
    $('.landingpage_shopbybrand .mt__item-title').equalHeight();*/
  } 
  
  // on page resize - run main function

  var resizeTimer;
  
  $(window).on('resize', function() {

    clearTimeout(resizeTimer);
    
    resizeTimer =...

CSS

@media only screen and (max-width: 64em) and (min-width: 40.063em) {

	.mt__item-title {
		font-size: 14px;
	}
}