title: How to put Media queries in javascript
body: <p>Im new into JavaScript, I'm trying to find out how to write a media query under 768px I have 3 boxes with the same height, when the other box have a long header the height of 2 boxes will follow. 
  My JavaScript is working good but I have issue under 768px. I want to disable the function I made under 768px. Is there anyone who can guide me? Your help will  highly appreciated. `</p>
  
  <pre><code>function sameHeightCta(mediaQuery) {
      varHcta;
  
      if (mediaQuery.matches) {
          $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight + 'px');
      } else {
          $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight);
      }
  }
  
  function init() {
  
      var currentElementHight = window.matchmedia('(min-width: 768px) and (max-width: 991.98px)');
      currentElementHight.addListener(sameHeightCta);
      sameHeightCta(GlobalElementHight);
  
  
      window.GlobalElementHight = 0;
      $('.c-cta-box .c-cta-box-headline').each(function (index) {
          var currentElementHight = $(this).height();
          if (window.GlobalElementHight &lt; currentElementHight) {
              window.GlobalElementHight = currentElementHight;
          }
      });
      $('.c-cta-box .c-cta-box-headline').css('height', window.GlobalElementHight + 'px');
  }`
  </code></pre>