Blog page post titles needs to move underneath the thumbnail

Support
#1

Hi There,

Please check the screenshot here: http://prntscr.com/illdzb and here’s the link to the blog page: http://www.alessandrorussino.com/blog/

How can I move my blog page post titles underneath the thumbnails?

Thanks

#2

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Theme Options > Global CSS area.

.blog .h-entry-cover {
    top: calc(100% - 1em);
    padding-top: 0;
}

Hope that helps.

#3

Hi Darshana,

The code doesn’t solve my request. It only stretched the title at the very bottom, but I need them after each thumbnail of the post is finished on the white space like this: http://prntscr.com/im1r1z

So it means, Post thumbnail, then title beneath, then gap and the second row of the posts. In short, just after the thumbnail is over, the title should start instead of overlapping.

Thanks

#4

Hi There,

To move the Titles just below the background-images, please add this to Theme Options > CSS

.blog .entry-cover {
	background-size: 100% calc(100% - 4em);
    background-position: top;
}

If you want some hover effects on the titles, please add this CSS as well.

.blog .h-entry-cover {color: #000;}
.blog .h-entry-cover:hover{color: #fff;}
.blog .h-entry-cover:before {background-color: #fff;}

Cheers!

#5

Hi There,

Thanks for your help, it works but not perfect yet. When I used that CSS, the post thumbnails got stretched vertically which isn’t good check here: http://prntscr.com/im8x17 So it’s not responssive with that code maybe.

Can I have the same result without the thumbnails stretching up?

#6

Hello There,

Thanks for updating us in! Sorry if it did not quite work well for you. Please remove all the given codes from our previous replies. To resolve your issue, please do the following:

(function($){
	$('.x-iso-container-posts .post').each(function(){
		var e = $(this);
		e.find('.h-entry-cover').insertAfter( e.find('.entry-cover') );
	});
})(jQuery);


.x-iso-container.cols-3 .entry-cover {
    margin-bottom: 56px;
}

.x-iso-container .h-entry-cover {
    display: block;
    margin-top: -56px;
    margin-left: 1em;
    margin-right: 1em;
    top: auto;
}

.x-iso-container .h-entry-cover:before {
    max-height: 56px;
}

And you should have something like this:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.