Jack Jack - 7 months ago 19
HTML Question

Bootstrap's .thumbnail class is adding mysterious top padding, on mobile only - but I can't fathom out why

Here is a temporary link to the page where I'm encountering the problem: http://shoutkey.com/squeeze

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,

is set to
, etc.

Any ideas?

This screenshot shows it working correctly, in large browsers:

correct display

And this screenshot shows it in mobile browsers - notice all the excess padding at the top:

incorrect display


This isn't coming from bootstrap. that space is being taken up by your .news-author divs, but you have either some float/clear issues or some unclosed tags, etc. causing it to interact strangely with the .thumbnail div below it. you can see what's happening by adding either .news-author {display:none} or removing the background:#fff from .thumbnail

Edit: You can fix it by adding class 'clearfix' on your col-md-4 div that contains the headline and author info.