Overflow of titles on mobile devices
jobvink opened this issue · comments
Overflow of titles on mobile devices
On mobile devices such as iPhone, long titles can overflow the design, this happens because the overflow-wrap and hypens css-property of these titles are not specified and set to there default. The correct values should be overflow-wrap: break-word and because the page language is already set to nl hyphens: auto can be used to break the titles automatically.
To Reproduce
Steps to reproduce the behavior:
- Go to https://coronadashboard.rijksoverheid.nl/landelijk/vaccinaties
- Set the with of your viewport to 375px
- Scroll down to 'Vaccinatiebereidheid'
- The title 'Vaccinatiebereidheid' should overflow the design.
Expected behavior
Long titles should hyphenate when represent on smaller devices.
Screenshots
Smartphone (please complete the following information):
- Device: iPhone X
- OS: IOS 14.4.2
- Browser safari
- Version 14
Governance
- I've read the contributing document https://github.com/minvws/.github/blob/master/CONTRIBUTING.md
- I've read and understand the Code of Conduct https://github.com/minvws/.github/blob/master/CODE_OF_CONDUCT.md
- I understand that any contributions or suggestions I made may make it into the actual code. I've read the License https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/LICENSE.txt and the contributor license agreement https://github.com/minvws/nl-covid19-notification-app-coordination/blob/master/CLA.md
Thanks for the report! We're aware of the issue and have it on our list of items to fix. We might opt for just using a slightly smaller font-size but appreciate the suggestion to hyphenate.
