Archived topic
Hero Text goes (not) responsive
8 replies · Started by Francesco on August 10, 2021
Hi guys,
Congratulations for the work you carry on.
I'm having problems with the Hero Text on this page: https://stage.wilhelm-waermetechnik.de/
The text "Trink-, Kühl- und Heizungswasseraufbereitung" remains the same in the mobile version.
This makes the text impossible to read.
In the mobile version, the word "Heizungswasseraufbereitung" should be divided into two lines:
Line 1: "Heizungswasser-" / Line 2: "aufbereitung"
I have tried "" with no results.
What I'm doing wrong?
Many thanks.
Hi there,
As it is, there's no way to specifically set a line break on the part you've suggested. We may have to create a duplicate heading that displays on desktop (the current one) and on mobile with has the specified break.
But if you're fine with this kind of wrapping - https://share.getcloudapp.com/Wnu0djN1 - we should be able to do something like this by adding overflow-wrap via custom CSS.
Hi Elvin,
many thanks for your answer.
The division you suggest is unfortunately incorrect in German.
I checked the documentation, but I can't find what I need.
How can I create a duplicate heading for desktop and mobile?
Many thanks in advance.
Francesco
How can I create a duplicate heading for desktop and mobile?
You basically have to duplicate the Heading block that contains "Heizungswasseraufbereitung".
You then add hide-on-mobile class on the original.
You then add hide-on-desktop class on the duplicate.
And then do the specific line break on the duplicate.
With this, we basically have 2 instances of the same heading but with the different line breaks. The first one appears only on desktop, the second one appears only on mobile. :D
Here's a demo video of the idea - https://share.getcloudapp.com/4gul5Ql1
Hi Elvin,
got. Many many many thanks.
Solved.
Have a nice day.
Francesco
Hi Elvis,
sorry but I've to open this topic again.
I've done what you told me to do, but I'm still having issues on the mobile version of https://stage.wilhelm-waermetechnik.de/
If you check the mobile version of the site, you'll see that the second heading I created is not complete. I can't read everything I wrote.
Again, what I'm doing wrong?
Please help and many thanks in advance.
Francesco
Hi there,
the issue is two fold:
1. the font size.
2. the word-break.
The font size of a GB headline block can be reduced in the Settings > Typography. Select the Tablet or Mobile Tab to change it specifically for those devices.
The Word Break would require some CSS.... BUT there is a problem there, as it will break the word at whatever point the text reaches the end of the container. Unfortunately browsers have very poor auto hyphen support, so theres no cross browser solution for hyphenating text, and those browsers that do support it don't have complete language support so the hyphen will just appear where the text hits the container.
Really silly question - and apologies for my ignorance as my German language skills are terrible. But is it not possible to split the words ? eg.
Heizungs wasser aufbereitung
Hi David,
many thanks.
I followed your advice, and changed the font size for tablet and moible using Settings > Typography
Many thanks agains.
Francesco
Glad to be of help.
