Docs

[Moritz O]

Dear support Team,
I have a question concerning the Grid. When using a mobile device the Grid will randomly separate words, even when it would not be necessary. Is there a way to determine that the Grid will not break words?
Example: saritofuhrmann.de/fortbildungen
I have managed in chrome to set font sizes in a way that it will not happen, but when the content changes it might happen again. In Firefox for example it still breaks up my words even though there is enough space to just break the text between words and not within a word.
Thanks for your help!
Moritz

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 480px) {
    .lome .tg-item-title {
        font-size: 14px !important;
    }
}

Hope it helps 🙂

[Moritz O]

Thanks Thai,
unfortunately it doesn´t help. Even when the text is small enough, it breaks when its doesn´t need to break (see screenshot) Isn´t there a way with css to prevent the breaking altogether?
Moritz

P.S.:
Is there a setting in the forum that I get a notification via email when you post your answer?

[Jade]

Hi Moritz,

Kindly optimize and reattach the image again as I can’t seem to see the issue you are describing.

You may click on the subscribe option in at the top of this post.

[Moritz O]

Thanks Jade,
It really seems to be a Firefox only issue. Chrome separates the words in a really smart way…

[Rupok]

Hi there,

Thanks for writing back. I can see this fine on Firefox and it seems usual because certainly the long words need to be break down to new line. However you can add this CSS :

.lome .tg-item-title, .lome .tg-item-title a {
  word-break: keep-all;
}

Hope this helps.

Cheers!

[Moritz O]

Hi Rupok,
Unfortunately the separation of the words is done in the wrong way (at least in german).
The code doesn´t change anything either… :/
Any other suggestions?
thanks!
Moritz

[Rue Nel]

Hello Moritz,

Thanks for the updates. Could please update the code and use this instead;

#top .lome .tg-item-title, 
#top .lome .tg-item-title a {
    word-break: normal !important;
}

Hope this helps.

[harmoniqa]

Hi!

I also have a word separation problem – picture attached.
I tried both codes and none of which are working…

Thanks!

[Lely]

Hi There,

Please do share the page URL of the screenshot so we can check further on your issue. Thanks.

[harmoniqa]

This reply has been marked as private.

[Christopher]

Hi there,

The title is displaying fine on my end, please see the attachment.
Please clear cache and check again.

Thanks.

[harmoniqa]

Cleared cache and restarted my mac, still the same in Safari and Firefox, its ok in Chrome.

[Paul R]

Hi,

You can try this code instead.

.tg-item .tg-item-title a {
  -moz-hyphens: none !important;
  -ms-hyphens: none !important;
  -webkit-hyphens: none !important;
  hyphens: none !important;
  word-break: normal !important;
}

Hope that helps.

[harmoniqa]

It works, thank you!

[Author]

Posts