1. crimle
  2. Sherlock Holmes The Voice
  3. Commercial Templates
  4. Wednesday, 28 June 2023
  5.  Subscribe via email
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
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Chris

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

Ciaran
  1. more than a month ago
  2. Commercial Templates
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Sorry Ciaran. I thought I had copied the URL into the URL field. The URL is https://evapelster.com/
  1. more than a month ago
  2. Commercial Templates
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 5
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 6
Accepted Answer Pending Moderation
0
Votes
Undo
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
  1. more than a month ago
  2. Commercial Templates
  3. # 7
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters
the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok