title: How do I make a set of images/links more responsive for a mobile view?
body: <p>I am trying to make my set of portfolio images more responsive when it gets below about 730px and again at 560px. I may have dug myself a hole as I coded this page a ways back before I was a little better at this stuff. Anyway, any style suggestions/coding suggestions would be great. I have some open media queries at the bottom that target the images themselves. I really appreciate any help!</p>
  
  <pre><code>#portfolio {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 80px;
  text-align: center;
  }
  #portfolio .port-entry {
  border-radius: 8px;
  width: 32%;
  height: 32%;
  display: inline-block; 
  box-shadow: 2px 2px 8px black;
  }
  
  .description {
  padding-top: 35px;
  background-color: black;
  opacity: 0;
  height: 0;
  transition: all .3s ease;
  color: white;
  border-radius: 8px;  
  }
  
  .description:hover {
   opacity: .9;
   height: 100%;
  }
  </code></pre>
  
  <p><a href="http://codepen.io/MindfulBell/pen/NxGNWN" rel="nofollow">http://codepen.io/MindfulBell/pen/NxGNWN</a></p>