title: How to move absolutely position elements depending on screen size in Jquery
body: <p>Hi I am building a magnetic poetry game where you drag words together to form some phrases.  I am Using jqueryui draggable and droppable with absolute positioned divs.</p>
  
  <p><a href="http://test-magnets.meteor.com/" rel="nofollow">http://test-magnets.meteor.com/</a></p>
  
  <p>I am also trying to make the game responsive as much as possible.  I have a bank of words to the right of the fridge that have a class "not-in-play"  once you drop on the fridge that class is removed.  So when the screen size is smaller i just want to move the magnets that have the class "not-in-play".  </p>
  
  <p>i was thinking something like this</p>
  
  <pre><code>  $(document).ready(function() {
      var screenwidth = $(window).width()
      if (screenwidth &lt;= 800) {
       $('magnet.not-in-play').each(function(){  
        var currentPosLeft = parseInt($(this).css('left'));
        $(this).css('left', (currentPosLeft - 1000) + 'px');
       }); 
      } 
    });
  </code></pre>
  
  <p>I can get an alert to fire inside the if block but any css i try is not working.  It works in the console fine hence my confusion.  Any suggestions would be greatly appreciated.  Thanks</p>
  
  <p>this seems to work fine in a fiddle
  <a href="http://jsfiddle.net/ff0ynexc/" rel="nofollow">http://jsfiddle.net/ff0ynexc/</a>
  just not in my app</p>
  
  <p>-John</p>