title: Resizing images using media queries
body: <p>Ok so I am making a filterable portfolio with bootstrap 3 and quicksand.js, I am using quicksand to filter the portfolio. Now I had this working fine when my images were set widths and heights but when I change the width and height to 100% the sorting is weird, the images become bigger when they are sorting and this causes all kinds of glitches.</p>
  
  <p>I had to use jquery migrate to get the sorting to work because the tutorial was so old, I dont know if this will be a contributing factor to my issue.</p>
  
  <p>Here is <a href="http://jsfiddle.net/uv634/" rel="nofollow">old jsfiddle</a> with the issue.</p>
  
  <p><a href="http://jsfiddle.net/uv634/1/" rel="nofollow"><strong>Here is updated fiddle, with my max height + width fix</strong></a></p>
  
  <p>Also you can <a href="http://aliensix.com/lightningbolt/" rel="nofollow">check out this link</a> which has the images at a fixed width, the sorting looks fine but then they stack on top of each other at lower screen sizes.</p>
  
  <p><strong>UPDATE:</strong> Okay I have fixed the issue at desktop width by using <code>max-width: 390px;</code> and <code>max-height: 390px;</code> on my <code>.portfolio img</code> class. But now on lower resolutions (tablets etc) the images are bigger again. Would the best way to fix this be with media queries or any suggestions? I realize now that bootstrap is designed to be mobile first but I am too far in my code I believe, what do you guys suggest.</p>