Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use overflow-wrap on headings #305

Merged
merged 1 commit into from Jan 18, 2024
Merged

Use overflow-wrap on headings #305

merged 1 commit into from Jan 18, 2024

Conversation

radiantly
Copy link
Contributor

Test plan

With this fix:

Site screenshot after this change

Untested on IE8+, but it should work based on the compatibility table for overflow-wrap.

Closing issues

Closes #285

@radiantly radiantly changed the base branch from master to dev January 5, 2024 15:05
@mistermantas
Copy link
Member

This is definitely one option, especially for titles with long dates like the ones in the screenshot... However...

  1. making the max width bigger for the container might be worth considering, especially with these larger text sizes
  2. minimizing the font size on mobile (and in general, smaller devices first) might be a better idea

do you think this is the best option anyway? If so, I'll just merge it.

@radiantly
Copy link
Contributor Author

Those are good points. As this is more of an issue when it comes to mobile screens, I think we can skip option 1, since the existing margins look fine. We could implement option 2 - here's how it looks with font-size: 36px; line-height: 1.1.



But regardless of whether we implement a smaller font size or larger width, it still doesn't fix the incorrect overflow wrapping so I'd say we still need the overflow-wrap property.

@mistermantas mistermantas merged commit 7f5f4dc into cstate:dev Jan 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Long words in headers may cause overflow and horizontal scrolling
2 participants