Hi Chris

Would you have a URL to an example of this issue?

Ciaran

Sorry Ciaran. I thought I had copied the URL into the URL field. The URL is https://evapelster.com/

Thank you Chris

I believe the issue is related to some of the longer words not breaking to a second line on smaller widths. To amend try adding the following to the Custom CSS field of your templates parameters (Extensions -> Templates -> [YourTemplateStyle] -> Custom CSS)....

h1, h2 {

    word-break: break-word;

}

Ciaran

Hi Ciaran

in fact this seems to have resolved the issue. Unfortunately there are many long words in the German language. Maybe I need to adjust the font-size a little bit. I guess I will be able to find a solution for this.

The remaining issue concerns the intro images of the blog articles:

1st article «Fussreflexzonenmassage-Therapie» we see the left padding but the image seems to be outside of the screen.
2nd article «Klangmassage-Therapie» a small part of the image is visible.
3rd article «Astrologische Beratung+Astromedizin» the image seems to be outside of the screen (like 1st article)

Your demo website https://www.joomla51.com/demo/0169/index.php shows a similar effect as far as the article «Vivamus sit amet» is concerned. Only a very small part of the image is visible. Maybe the image should better be placed above the text, not to the left. How can this be done?

Thank you and kind regards
Chris

Hi Chris

German language tends to build extensively long words (i.e. "Donaudampfschifffahrtskapitänsmützenband" ). Being located in Germany myself, I find it useful to switch on hyphenation, which not always gives a perfect solution, but seems to give a website a better look than without. You can do this by CSS for the body tag with "hyphens: auto;", but this would also apply to menus etc.

A better solution is to use this extension: https://extensions.joomla.org/extension/hyphenateghsvs/. It gives you more control over where hyphenation should apply. And if you really encounter a word with a bad hyphenation, you might use the soft hyphenation character (­) to propose a better solution.

Hope this helps!

Rolf

Hi Chris

Adding to Rolf's comment, you can scope hyphens to just h1 and h2 headings as these would be the elements most likely to have this issue with the following...

h1, h2 {

    word-break: break-word;

    hyphens: auto;

}

Ciaran

I am absolutely fascinated by this solution. I did not know that these two CSS elements exist. I am tempted to add them to any of my wbsites.

Thank you very much and kind regards
Chris