title: CSS: Responsive design - Shrinking images in a two column list
body: <p>I have an unordered list containing 6 pictures. I would like the list to display the images in two columns only and then shrink the images as the window resizes.</p>
  
  <p>Here is a link to a sample of jsFiddle: <a href="http://jsfiddle.net/WuwYZ/" rel="nofollow">http://jsfiddle.net/WuwYZ/</a></p>
  
  <p>At the moment, if your window is over 450px wide then you will see 3 or more columns, and if it is under 300px you will see 1 column.</p>
  
  <p>How can I set the max width of the list to stay at 300px so that there is never more than two columns? 
  And how can I get the images to shrink rather than merging into one column?</p>
  
  <p>Large images in two columns:</p>
  
  <pre><code> X X
   X X
   X X
  </code></pre>
  
  <p>When window extends it looks like this (but I want it to stay the same as above):</p>
  
  <pre><code> X X X X 
   X X
  </code></pre>