Title/header issue
I'm trying to create a header like the one in the image. I achieved the 'desired' result for the 1440px but the problem with this is when page scales up it looks pretty ugly. I want it to be able to scale ++ add more words to the line and not just be stuck at 'created text'.. this is what I got so far.
https://codepen.io/yesm4n/pen/vYvvjeG
I tried different approaches but I can't seem to find a way besides 'hard-coding' the first part.
Thanks in advance 🫡
7 Replies
https://codepen.io/z-/pen/xxmmzKw/ddb9e2ccd71f32ee739e1499bc5291aa this is what comes to mind. It doesn't enforce the last line to look like what you've got, you could solve this with some JavaScript having another span on the end to fill up the rest of the space to find how long the last line is to then change the font size to get it to go half way
I see, thanks a lot. I will try to do something similar and see how it goes.
@Ylli try using the
text-indent property.I had initially tried that, however it doesn't play nicely with
calc(100% - 26ch) to have a set size from the right, you can't use max(calc(100% - 26ch), 0px), it supports going negative so it can go off the screen.
You can use percentages however you can end up with 1 or 2 words on the first row that looks strange (also, it can push a word off the right when there's 1 word, although it's narrower than would normally be viewed)
I went with including a span because it solves these 2 problems nicely and it provides far more flexibility with things like min and max widths, while also being really simple
I've included them in the pen
I also included a normal
text-indent to show that it's bad for big indents. It's perfect for small indents, bad for huge onesI see. Thank you for going through all of this to help me out.
For the moment I've 'progressed' to other parts of the projects leaving this untackled as its taking way too long. I will go back to it asap. If I find a 'proper' solution, I will post it here.
Thank you both!
After playing with what you guys already gave me, I managed to make it 100% to the design requirements. Here is the end result.
https://codepen.io/yesm4n/pen/BavMVMG
@snxxwyy @z- ::theProblemSolver:: thank you again.