Archived topic

Aligning Archive Headers

3 replies · Started by Ian on November 1, 2018

Viewing posts 1–4 of 4

November 1, 2018 at 4:20 am #716297

Hi
This is a quick question.
When posts are displayed in columns on an archive page, normally the headers are above the images and the excerpt is below the picture.
If the headings wrap then the alignment of the picture and Read More buttons all goes awry.

I guess there's a way to display the posts in a single column one under the other which would make the issue less visible.
I was wondering whether it is possible just to add space to allow for either one or two line headers after text wrapping so that the images align properly as will the Read More buttons. Or maybe this can somehow be done on a post by post basis?

Any tips on best practices please?

Thanks
Ian

November 1, 2018 at 8:56 am #716538

Hi there,

try this CSS:

.entry-header .entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
}

You can adjust the line-height / height ratio. This setup forces there to be two lines.

November 1, 2018 at 6:54 pm #716906

Hi David
You gave me the right idea - it was a different class to target as yours targets the page titles not the archives dragged in it seems. Anyway all working and thanks a bunch.

November 2, 2018 at 4:27 am #717105

Awesome, glad that helped and you found the solution you needed.

This archived topic is closed to new replies.

Start building better websites today.