title: jQuery if statement with CSS media queries
body: <p>I'm trying to use media queries to disable float at a certain browser width. This if statement only works if I reload the page for the current size. Is it possible to have jQuery apply the change when the CSS property changes?</p>
  
  <pre><code>if($('.two-column li').css('float') == 'left') {
      $('.two-column li').equalHeights();
  }
  </code></pre>
  
  <p>and I'm probably supposed to use $(this) or something on the second $('.two-column li') but I don't know why it doesn't work. I don't know too much about jQuery.</p>
  
  <p>edit:</p>
  
  <p>By default, the style for two-column li is something like</p>
  
  <pre><code>.two-column li {
      float: left;
  }
  </code></pre>
  
  <p>and then let's say...</p>
  
  <pre><code>@media only screen and (max-width: 767px) {
      .two-column li {
          float: none;
      }
  }
  </code></pre>
  
  <p>This does work. When the width is below 767px, it stops floating. The ugly jquery I have above seems to work partially. By default, equalheights plugin runs, but when width is below 767px, the plugin does not run. My problem is that whether it runs or not depends on what size the browser was at when the page was loaded. I'm trying to make it dynamic like the media query in a responsive design.</p>
  
  <p>And I called it on document ready.</p>
  
  <p>With the help of more research and a comment below, it is now like this including doc ready... still doesn't do it on resize though, needs refresh.</p>
  
  <pre><code>$(document).ready(function () {
      $('.two-column li').filter(function(index) {
          return $(this).css('float') != 'none'
      }).equalHeights();
  });
  </code></pre>