title: Responsive images and lists
body: <p>Tryign to get it so that I have a max width for an image to be 308px and when the browser is scaled larger then the list will have more items per row. Just now it seems stuck at 3 list items per row but if I would like it to be fully reponsive and if the browser is scaled to minum it can be then it will be one image per row.</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;img src="http://distilleryimage8.s3.amazonaws.com/23ddf3860e2911e29c2d22000a1e9e7e_6.jpg"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>ul{
      position:relative;
      float:left;
      width:100%;
      height:100%;
      margin:45px 0 0;
  }
  ul li{
      width: 33.3333%;
      float:left;
  }
  ul li img{
      display: block;
      height: auto;
      width: 100%;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/mynameisdonald/gfjDk/" rel="nofollow">JSFIDDLE</a></p>