title: Make a div smaller and bigger depending on width size
body: <p>I'm trying to have a grid of 8 items, when the browser's width gets smaller, I want the divs to get smaller, when the browser increases I want the divs to get bigger but only to a certain size.</p>
  
  <p>Please find attached my demo here: <a href="http://jsfiddle.net/4qnzdhpz/" rel="nofollow">http://jsfiddle.net/4qnzdhpz/</a></p>
  
  <p>You'll notice that when the browser width is small the boxes overlap, this is why I want to make them smaller, at the moment they are 70px, I'm thinking the best way would be to use percentage but I only want them to go to a certain size so I'm guessing i'll need to use max-width and possibly min-width.</p>
  
  <p>Here's a snippet of the css I am using for the div boxes, the rest of the css is in the fiddle.</p>
  
  <pre><code>.box {
  width:70px;
  height:70px;
  background:green;
  border: 2px solid black;
  border-radius: 10px;
  position: relative;
  display: block;
  top: 10%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-23deg) ;
     -moz-transform: translate(-50%, -50%) rotate(-23deg) ;
       -ms-transform: translate(-50%, -50%) rotate(-23deg) ;
          -o-transform: translate(-50%, -50%) rotate(-23deg) ;
                transform: translate(-50%, -50%) rotate(-23deg) ;
  }
  </code></pre>