[Resolved] Front page titles truncated for desktop and not for mobile

[Caitlin]

I am trying to get the posts on the front page of my website to display in full. I removed the CSS code based on a couple of other support posts and the titles are displaying in full when I view them on mobile. Unfortunately, the titles are still truncated on desktop. Any ideas on how to fix this? My site: gislounge.com.

Thanks in advance,
Caitlin

[Ying]

Hi Caitlin,

Are you referring to the posts’ titles?

I’m not sure what you mean by the the titles are still truncated on desktop, can you explain a bit more?

[Caitlin]

Yes, the post titles. On the desktop version of the website the titles are cut off. On the mobile version, the post titles are in their entirety.

[Fernando]

Hi Caitlin,

Can you temporarily disable your caching/optimization plugins? I’ll try to see where the CSS causing this is coming from. With the caching/optimization plugins activated, they are compiled into one file, so I can’t determine for sure.

Hope to hear from you soon.

[Caitlin]

Thanks. I just disabled the plugins.

[Fernando]

Thank you!

Now, if you go to Appearance > Customize > Additional CSS, you’ll find this code there:

@media (min-width: 768px) {
.generate-columns-container article .entry-header .entry-title, .wp-show-posts article .wp-show-posts-entry-title {
    line-height: 2.5ex;
    height: 5ex;
    overflow: hidden;
    text-overflow: ellipsis;
}
}

The code causing the issue is:

height: 5ex;
overflow: hidden;

You can remove these two and the text-overflowline.

Hope this clarifies!

[Caitlin]

Yay! That worked. Thank you very much for the quick fix.

[Fernando]

You’re welcome Caitlin! Glad to be of assistance!

[Author]

Posts