title: Bootstrap's .thumbnail class is adding mysterious top padding, on mobile only - but I can't fathom out why
body: <p>Here is a temporary link to the page where I'm encountering the problem: <a href="http://shoutkey.com/squeeze" rel="nofollow noreferrer">http://shoutkey.com/squeeze</a></p>
  
  <p>If you resize your browser down to a mobile layout width, you'll see the thumbnail image container suddenly is far too high with extra padding at the top. But I can't for the life of me work out why this is - there are no CSS rules that appear to do this, <code>height</code> is set to <code>auto</code>, etc.</p>
  
  <p>Any ideas?</p>
  
  <p>This screenshot shows it working <strong>correctly</strong>, in large browsers:</p>
  
  <p><a href="https://i.stack.imgur.com/GEIZI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GEIZI.png" alt="correct display"></a></p>
  
  <p>And this screenshot shows it in mobile browsers - <strong>notice all the excess padding at the top</strong>:</p>
  
  <p><a href="https://i.stack.imgur.com/D0rts.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/D0rts.png" alt="incorrect display"></a></p>