Grids and hyphenation

Support
#1

Hi,

I’ve been having trouble trying to get rid of the hyphenation in the titles of the grids on my website. The main problem is on my blog page.

https://www.thatthingyoupluck.com/blog/

I tried adding the code featured on this post;

but it would still keep happening.

Any help would be appreciated.

Thanks

Harp

#2

Hi Harp,

Thanks for reaching out.

May I know which grid items that is still displaying it? I don’t see any hyphens on my end. Or please clear your browser cache and test it again.

Cheers!

#3

Hi Rad,

I’m cleared the browser cache and checked it in Chrome too and I’m still getting the same issue. It seems to be a problem on the grid which is used on the blog page, which is linked below.

It starts on the second grid item which is titled ‘Southbank Centre London | Nation-al Poetry Library Open Day’. There should be no hyphen in the word ‘national’.

Second time is on the forth grid item ‘Lifestyle Photography London | Mandy Murdoch Health & Well Be-ing Coach Website.’ Again there should be no hyphen in the word ‘being’.

There is plenty more in the grid which you should be able to see. Then if I look at it on my phone its even worse with pretty much every grid title being hyphenated.

Please could you check it again as it’s still there.

#4

Hi Harpreet,

I couldn’t see this custom CSS in your website:

.tg-item .tg-cats-holder *, 
.tg-item .tg-item-excerpt,
 .tg-item .tg-item-title, 
.tg-item .tg-item-title a {
    word-wrap: normal;
}

Could you please add it again?

Thanks.

#5

Ok I’ve added the code to my website and when I click view source on the page the custom CSS shows up but the same thing is still happening. Am I putting it on there correctly?

#6

Hello Harpreet,

I have checked your site and the code is still not there. Have you added it in the Global CSS that is in X > Theme Options > CSS:

if you added it there but it is not taking effect, there might be an issue with the CSS code that you have in the Global CSS such as some CSS syntax error that is stopping the CSS code you are adding to work as expected.

To verify that, please copy all the codes that are in the Global CSS and paste it here.

It should provide some information if there are any CSS error that is causing the issue that you have to fix so that the CSS codes will work.

Hope this helps.

#7

I have added the CSS to the link you have showed and it shows up when I click in there. This code is all that is in there.

There is also a lot of CSS code which is in Dashboard > Appearance > Customise > Additional CSS. should I cut this out and add it to the link you mentioned above instead? When I copied the code into the checker there was no errors but a few warnings. To be honest I’m not very good with CSS, so don’t really know what I’m doing.

#8

Hi,

That’s fine, no need to transfer those css codes.

Can you try adding the code at the very first line in Theme Options > CSS then add !important

eg.

.tg-item .tg-cats-holder *, 
.tg-item .tg-item-excerpt,
 .tg-item .tg-item-title, 
.tg-item .tg-item-title a {
    word-wrap: normal !important;
}

If it still doesn’t work, please provide us your wordpress admin login in Secure Note

Thanks

#10

Hello @grifter,

I have logged in and updated the code into this:

.tg-item .tg-cats-holder *, 
.tg-item .tg-item-excerpt,
 .tg-item .tg-item-title, 
.tg-item .tg-item-title a {
    word-wrap: normal !important;
    word-break: keep-all;
    hyphens: none;
}

Please check your grid now.

#11

Now that seems to work. Thank you very much for figuring this out for me.

#12

You are most welcome. :slight_smile:

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.