title: Responsive Lightbox
body: <p>I'm using <a href="http://dimsemenov.com/plugins/magnific-popup/">Magnific Popups</a> ajax popup to to create a popup experience somewhat like Instagram or Facebook (image on the left, comments on the right, etc). How would I go about setting a max height for the entire lightbox and center the image when it can be centered vertically? This needs to work in all browsers and has to be responsive which is tricky. I can't seem to get it working properly across all browsers. I suppose I don't mind a jQuery solution as this is what I might need.</p>
  
  <p>The image and content are floated as such:</p>
  
  <pre><code>.image_container, .content {
      width: 50%;
      float: left;
  }
  </code></pre>
  
  <p>And the float is just cleared with the screen size is reduced using media queries.</p>
  
  <p>I've made a jsfiddle to help understand what I'm trying to explain:</p>
  
  <p><strong><a href="http://jsfiddle.net/ceqLJ/">jsFiddle</a></strong></p>
  
  <p>Try re-sizing the iframe to check out the effect.</p>