Hi guys,
maybe for you this question is a bit silly, but I would need to know if it is possible in blocs to make a text scale responsivie along with the browser width as in this example: https://du2.framer.website/
the affected part is the title where it says DU2 CREATIVE STUDIO
Yes, you can do this with javascript. Use the javascript to get the number of characters in the text, and then some math.
Font size = 100/Text Length x 2
Then using vw (Viewport Width) units, add the font size as inline CSS on the text element you want.
Done.
The result…
Of course you can manually write the CSS also. Using Javascript just makes it work regardless of the text you use, without having to work it out and change it for different text lengths.
Well I did answer your question, that it’s possible, and gave you the logic behind making it work, as I would do it (probably other ways).
How you implement that you will need to invest some time into. I think that’s fair. You can always ask further questions as you figure it out / learn to think it through.
you are absolutely right, the problem is that with respect to what you said, I have no idea how to proceed. I shouldn’t have any problem with the mathematical formula you wrote, but about viewport width and CSS I don’t know where to put my hands Understood the obvious one, I will do all the appropriate tests, I always proceeded this way with the help of you experts in this forum.
vw and vh (viewport width and height) are units used in css like px and %.
There is even dvh for dynamic viewport height. Plus some others.
Lots of info online.
Being familiar with the way CSS and HTML works is vital when making websites for gain. Apps should just be tools to build with. You have to know the basics when things go wrong and or you need to do something like this. You don’t have to know everything, but the basics can help you find the answers and with thought process. That’s my 2 cents
Yes you can. But you have to custom code it. Those units haven’t been added to the class editor. If anything, we should get dvh & svh added, to work much better in mobile.
You can add CSS entires to set a min-height of these on your hero’s etc manually for a better UX,