Hi Ciaran
I created a new Joomla 4 website based on your J51_Natalie_DemoInstaller. But the result does not seem to be responsive. The maincontent and the custom modules are flowing out over the right edge of the screen. The mod_j51icons modules are OK.
The logo has a defined max-width = 100% but nevertheless it is also flowing out over the right edge of the screen. I know that I can use a smaller logo for mobile screens. So that's not the main reason for my question.
The main issue is the maincontent (a Category Blog - Masonry) and the custom modules that are not responsive.
Thank you and kind regards
Chris
- crimle
- Commercial Templates
- Wednesday, 28 June 2023
- Subscribe via email
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
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
- more than a month ago
- Commercial Templates
- # 1
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...
Ciaran
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
- more than a month ago
- Commercial Templates
- # 2
Sorry Ciaran. I thought I had copied the URL into the URL field. The URL is https://evapelster.com/
- more than a month ago
- Commercial Templates
- # 4
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)....
Ciaran
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
- more than a month ago
- Commercial Templates
- # 5
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
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
- more than a month ago
- Commercial Templates
- # 6
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
Thank you very much and kind regards
Chris
- more than a month ago
- Commercial Templates
- # 7
- Page :
- 1
There are no replies made for this post yet.
Be one of the first to reply to this post!
Be one of the first to reply to this post!
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here. Register Here »