title: How can I call a function depending on screen width?
body: <p>I have 2 functions, and I want them to be called depending on the screen width. </p>
  
  <p>This is what I have tried: </p>
  
  <pre><code>var winWidth = $(window).width();
  
  var sections = function() {
      $('.image').each(function(){
         var $this = $(this),
          x = $this.find('img').width()
          $this.width(x);
       });
  };
  
  var sectionsMobile = function() {
       $('.image').find('img').css({
             'height': 'auto',
              'width': '100%'
           });
  };
  
  function checkSize() {
    if (winWidth &gt;= 800) {
        sections();
      }   else {
        sectionsMobile();
    }
  }
  jQuery(window).on('load resize', checkSize);
  </code></pre>
  
  <p>When the page loads, it works and the CSS is applied. However resizing between the 800px boundary doesn't switch between the functions.</p>
  
  <p>Full demo here: <a href="http://codepen.io/sol_b/pen/PzgdWy" rel="nofollow">http://codepen.io/sol_b/pen/PzgdWy</a></p>
  
  <p>Any help much appreciated.</p>