[Resolved] title overflow in blog archive / keeping text flush with image

[Christine]

Hello,

I added some CSS recommended by Generate Press to keep text aligned to the right of images in the blog archive view:

.single .entry-content {
overflow: hidden;

However, when the titles are longer and go to the next line, this disrupts the text and it appears to overflow. How can I stipulate that the text not overflow, but stay flush with the image? I don’t mind the preview word count being reduced to accommodate longer titles. Thanks!

Also, what is the difference between GP version 1.6.2 and 2.1.2? I have the former, but only recently installed it. Thanks!

[David]

Hi there,

can you open the site so i can see the problem?

GeneratePress theme (free) is on version 2.1.2.
GeneratePress Premium Plugin is on version 1.62.

[Christine]

Ok it’s open.

[David]

Its still showing the coming soon page. Let me know.

[Christine]

Ok it should be fixed.

[Leo]

Hi there,

Hmm quite sure what you mean..

The .single selector would only target single posts and not the main archive page.

This is what I see on the main blog page currently:
http://www.screencast.com/t/thlOrha78Dl

Not seeing any obvious problem. What am I missing? 🙂

[Christine]

Hmm, should I delete it then? I just want the text to appear flush with the images, the way it is now. Anything else I should add to ensure this?

If you go to the 3rd page, there’s a post titled “Handful of Dust…” which overflows.

Thank you!

[Leo]

That CSS has nothing to do with the main blog page so your current layout should remain if you remove it.

What do you mean by overflows? This is what I’m seeing currently and not sure where the problem is:
http://www.screencast.com/t/thlOrha78Dl

[Christine]

Thank you. That’s because those are shorter post titles. When I enter a longer title, such as the “Handful of Dust” post in the Interviews category, it forces the text to overflow, which messes up the alignment of the archive view. You can also see it if you go to page 4 (“Five questions with landscape ink artist Tamar miller”).

Thank you

[Leo]

what if we decrease top margin of excerpt with this CSS?

.entry-summary {
    margin-top: 0.7em;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

[Christine]

I like your style.

[Leo]

Glad to hear 🙂

[Author]

Posts