🎨 Fix overflowing headline about web-app HOT 11 CLOSED

Another data point for the header overflow:

Specific version is 70.0.1.

from web-app.

I have an initial solution, setting the word-wrap property to break-word. However, instead of overlapping, it breaks the word at the D. So instead of overlapping, depending on size of viewport, you'll see the following:

Thoughts on this solution? How would you prefer it to break?

from web-app.

Thanks for your contribution, @Klutch27 !

Breaking by word would be a good idea for instances where the words are aesthetic only (say, we wanted to have abcdef...wxyz... as a visual thing and wanted it to break accordingly. However, since this is a word, an an important one (as it's the title), we should probably try to rely on responsive fonts.

I'd propose investigation a solution that involves fluid typography, something with viewport width coming into account:
https://css-tricks.com/snippets/css/fluid-typography/

Excited to hear what you come up with!

from web-app.

Additionally, @Klutch27 , here is another resource!

https://codepen.io/MadeByMike/pen/YPJJYv

from web-app.

I wonder if using vw rather than vh for the font-size unit might give you greater ability to calculate according to the width of the columns?

I’m curious to know the design intention here, to work out how we can do it justice in code. Is it to have as big and impactful a header as possible, which splits across two lines if necessary, but is still sympathetic to a small viewport?

from web-app.

Your read on the design intention is 100% correct! When the luxury of it spanning 2 columns is possible, I'd like it to do that; but when not (narrower viewports), I'd like it to be impactful but not offensively so.

from web-app.

I felt a bit bad for hogging the only good first issue, so I opened another issue that might be a candidate for good first issue: #41.

from web-app.

@tatianamac is anyone currently working on this? If not , I can work on creating a more fluid typographic scale

from web-app.

You're welcome to—sometimes for first issues it's nice to invite first-time contributors since contributing to OSS can be intimidating. If you wanted to help @Klutch27 with it, that'd be awesome!

from web-app.

Yes of course. Hi @Klutch27 please feel free to message me if you need someone to work out your solution with. I'd be happy to. Cheers

from web-app.

Also I think I may need to close this issue as @laurakalbag may have worked it out already with #40.

I'll open a new ticket to develop a more fluid type system and tag you both, @codeAbul and @Klutch27.

from web-app.