[TTCmanagementParticipant]

Hi Team,

I’ve set my blog posts to be displayed in masonry style, but the titles of the different posts are too big. Is there a way to change the font size of the titles in the masonry grid? It doesn’t look good on mobile devices right now. The words just don’t fit their tiles…

Also, is there a way to limit the amount of characters displayed in the title? Some of the titles are really long, or have very long words in them, and I would like to be able to limit the amount of characters in the title so I can make the titles seem similar in length. I’m going for a very clean look, and right now it just looks too messy.

Here’s the link: http://www.inarea.nl/nieuws/

Thanks!

[RahulModerator]

Hi There,

Please use the custom CSS to change the size of the Blog for Mobile Devices:

@media (max-width: 979px)
.x-iso-container-posts.cols-3 .entry-title {
    font-size: 119%;
}

Please Note You can Change the font size as per your requirement.

Let me know if this helps.

Thanks!

[TTCmanagementParticipant]

Hi Rahul,

Unfortunately, that didn’t work for me.

Here’s exactly what I did: WordPress Dashboard -> Appearance -> Customize -> Additional CSS -> pasted the code where it says “You can add additional code…” -> Saved

I deleted the cache memory of my browser too, but that didn’t have any effect either. Did I do something wrong?

[RupokMember]

Hi there,

Thanks for writing back. There was a small type, please update to following :

@media (max-width: 979px)
.x-iso-container-posts.cols-3 .entry-title {
    font-size: 119%;
}
}

You can adjust the font-size if needed.

Cheers!

[TTCmanagementParticipant]

Hi Rupok,

I just tried what you suggested, but I got a warning about imbalanced curly brackets:

“Your curly brackets {} are imbalanced. Make sure there is a closing } for every opening {.”

[RupokMember]

Hi there,

Sorry there was another type that I missed. It should be :

@media (max-width: 979px) {
.x-iso-container-posts.cols-3 .entry-title {
    font-size: 119%;
}
}

Hope this will do the job.

[TTCmanagementParticipant]

Hi Team,

That didn’t work either. I tried changing the font size to 25%, but nothing changed (I deleted cache memory).

I AM doing this right? WordPress Dashboard -> Appearance -> Customize -> Additional CSS -> pasted the code where it says “You can add additional code…” -> Saved? That’s what I’ve been doing…

[JadeModerator]

Hi there,

Please provide your admin access so that we can check it further.

Thank you.

[TTCmanagementParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

The code works fine, please see the attachment.
If you want to change font size on all screen width, update your code to :

.x-iso-container-posts.cols-3 .entry-title {
    font-size: 25%;
}

Hope it helps.

[TTCmanagementParticipant]

Thanks so much! I used the second code you suggested to change the font size on all devices, and now all the titles fit in their boxes.

Just one more question: is there a way to limit the amount of characters displayed in the title when viewed on desktop? Some of the titles are really long, or have very long words in them, and I would like to be able to limit the amount of characters in the title so I can make the titles seem similar in length.

As you can see in the attachment, not all the tiles are of the same size, and I was thinking, if I can make limit the amount of characters in the titles so that all titles are only 3 lines, it would look a lot neater.

[TTCmanagementParticipant]

Sorry, the image was too big…

[Rue NelModerator]

Hello There,

Thanks for the updates. To limit the text in the titles, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-iso-container .entry-title a{
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

You should have something like this: http://prntscr.com/dstnmz

Hope this helps.

[TTCmanagementParticipant]

Great thanks so much! One question though, all titles are now 1 line. Is it possible to make this 3 lines?

[LelyModerator]

Hello There,

You’re welcome!
From previous suggested custom CSS please remove this line: white-space: nowrap;

It should be like this:

.x-iso-container .entry-title a{
    display: block;
    position: relative;
    z-index: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

See this:http://screencast-o-matic.com/watch/cbVQcCQB1K

Hope this helps.

[Author]

Posts