why font is not full screen ?
i want to make this font responsive and full screen by width how can i do it ?
i have code pen attached
https://codepen.io/kev00690/pen/zYgpNVV
33 Replies
I'm not 100% sure what you are trying to achieve but I suspect that by using media queries you are overcomplicating this and will never truly be able to achieve a 100% width text.
Whilst not generally a good idea, you could base the font-size on the viewport with something like this:
font-size: calc(100vw / 20);
(note - 20 is a magic number but it worked for your text example)
A quick fork of your pen: https://codepen.io/cbolson/pen/eYqVEKq
(note - as you have linked to the santa hat as a local file I am not sure how this will be affected by this dynamic text size).You're probably looking at something like this:
https://kizu.dev/fit-to-width-text/
Fit-to-Width Text
What if I will tell you how we could solve fit-to-width text with pure CSS without any hardcoded parameters? Curiously, scroll-driven animations will allow us to do just that! Join me as I continue exploring the experimental implementations of the latest specs.
That is very cool!! Definitely worth a closer look.
However it is important to take into account that
animation-range currently only has 70% browser coverage which doesn't include Firefox or Safari.Here's the newer version with close to 90%: https://kizu.dev/fit-to-width/
Fit-to-Width Text: A New Technique
Registered custom properties are now available in all modern browsers. Using some pre-existing techniques based on them and complex container query length units, I solved a years-long problem of fitting text to the width of a container, hopefully paving the path towards a proper native implementation.
1. you sure it will work ?
2. you sure it's worth the hassle ?
Alternatively, throw the text into an svg for less hassle.
https://codepen.io/kev00690/pen/zYgpNVV
this is the problem i'm facing
Wrap the lines individually within the component, depending on your design.
what do you mean ?
this is the design
As I understand it you need to do something like this:
So, as Vic says, each line is wrapped within it's own "text-fit" wrapper.
I must say that I think that my solution was simpler for you specific needs.
Either that or the SVG option that Vic also suggested.
you mean i should directly export text as svg and use here ?
i did this before
it goes like this
its possible to do the text with svg, and it can be shrunk/stretched to fit the width
That is due to other styling that you have defined.
Try commenting out the "display: flex" that you have on the body and you should see that it works.
oh yes but then social icons moves away
i tried your method
but i think somethin' is wrong
🤔 not sure what "something is wrong" actually means without seeing the code, a working example and knowing how you expect it to work
https://codepen.io/cbolson/pen/GRVxmaP
- I put flex back on the body but removed the align center.
- I then wrapped the text in it's own wrapper and gave that a flex grow of 1 and a flex basis of 100% so that it can stretch to the max amount of space.
- Finally I centered the social icons.
I have added some comments where I changed/added things.
I have added some comments where I changed/added things.
i updated my codepen
https://codepen.io/kev00690/pen/zYgpNVV
You just need to adjust the font-size to fit your design + font-family.
In my code I think that I mentioned that "20" was a magic number (ie I arrived at that value by testing various values until I hit the one that worked). For you pen 21 would actually be a better value to try, or even a decimal value (20.2 actually seems pretty spot on but it may depend slightly on the browser).
damnn it's good but you know chris i didn't quite understand that long text-fit code also read that website two times it straight up went over my head
i can use your code but it will be difficult for me to diagnose in future
I will admit that I don't fully understand it but then again I haven't tried too hard 😆 I know that it works as shown by the links that Vic shared so I just looked at what you had in your code that was "breaking" it.
As I say, I think that my solution (for this specific use case) is simpler to understand and less of a hack. All you need to do is adjust the value of the final "clamp()" function.
i didn't saw clap() function where is it ?
also this one is working for me
on your h1.
You have
font-size: max(1rem, calc(100vw / 20));. Try changing that to font-size: max(1rem, calc(100vw / 20.2));
OK, that is good too. It pushes the text on to a third line which is is fine 👍As SVG has also been mentioned a few times, and just for reference, you could create your SVG text something like this:
https://codepen.io/cbolson/pen/KKOoqbq
(note - I deliberately made the 2nd and 3rd lines of text slightly smaller to help you understand a bit better).
damn it's too easy
it's done i used cal() and it's working fine for me
i'm not gonna invest much time in this construction page cause i also have to design my portfolio website.
this is how it looks.
thanks for help guys i really appreciate it and i learn new things also.🎉
Very intriguing ! Why is the span[aria-hidden] then given a visibility hidden ? If it’s hidden from screen readers and sighted users, what is its point?
And why is the first element inside each .text-fit doubled wrapped in two spans ?
looks like i can learn something here 👀
Element is doubled. Hence one of them has aria-hidden true, so that it doesn't announce twice.
Element is doubled: it occupies space. The 2nd element then takes the remaining space, and we can find out how big that one is. We have two containers. The parent text-fit and the child that spans the rest. Registering properties, computes their values like a snapshot. Roma Komarov explains it very well in their article with the newer approach.
1. Element is hidden: Right I understand why it’s aria hidden by why is it then hidden for sighted users ?
2. Span wrapper is doubled
<span><span>fit-to-width text</span></span>: Ahh I see! thank you!i didn't understand anythin'