Archived topic
How to make thumbnail homepage straight
3 replies · Started by Fajri on September 20, 2021
Hi, i've a little problem.
I use thumbnail on homepage.
On homepage, there are a title with : 2 - 3 rows line.
Thats make my homepage is not straight
Pict : https://prnt.sc/1t1s8yc
I want to make the homepage like this : https://prnt.sc/1t1sk6p
Featured images and meta info / read more straight with other content/post.
Hi Fajri,
You'll have to set the post image thumbnail for archive pages to "Above Title" as shown here - https://share.getcloudapp.com/rRubdKBY
The setting is found on Appearance > Customize > Layout > Blog.
You then add this CSS for the Read more link.
body.home .inside-article, body.archive .inside-article {
display: flex;
flex-direction: column;
}
body.home .inside-article .entry-summary,
body.archive .inside-article .entry-summary {
flex: 1 1 auto;
display: flex;
flex-direction: column;
}
body.home .inside-article .entry-summary p.read-more-container,
body.archive .inside-article .entry-summary p.read-more-container {
margin-top: auto;
}i have set like the picture and add the code,
But, the posision of title 1 content with other content not straight
Hi there,
the issue is because of the different size featured images you have. Although we can provide CSS to resize them all to the same size it will have a negative impact on performance. I suggest you crop all your featured images to the same size.
