Hey,
Remove the margin bottom:
.entry-header, .entry-title, .entry-content p img:only-child
This will look like that then: http://screencast.com/t/2QpOA8HW
Both .entry-header and .entry-title have some margin assigned and they have no content, so they add some spacing. The image on homepage has some margin assigned as well.
The following rule
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-content:before, .site-content:after, .footer-widget:before, .footer-widget:after {
content: '';
display: table;
}
Adds some margin as well, but removing the display:table; will certainly break the mobile layout of yours.
So my suggestion is to apply a negative (prefixed with -) margin to the .content-area CSS, say margin-top:-20px;
Hi! Thanks for the help! I tried adding this:
.clear:before, .clear:after, .entry-content:before, .entry-content:after, .comment-content:before, .comment-content:after, .site-content:before, .site-content:after, .footer-widget:before, .footer-widget:after {
content: ”;
display: table;
}
But it had no effect. But then I added this:
.content-area {
margin-top:-20px;
}
and it worked! THANK YOU!
Hey,
Great! It’s more of a hack than a serious coding advice, but well it’s used commonly and it works 🙂