Scalable text in blocs

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


tx in advance

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…

CleanShot 2024-10-10 at 09.39.01

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.

1 Like

Tx @PeteSharp but i didn’t understand so well. Could you make a little video to show me how to do? It would be super for me.
Tx a lot

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.

1 Like

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 :sweat_smile: 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 :joy:

Hi @davideakadudu

You also can check the Blocs Store for a Bric called Fit Text …
Maybe that’s what you. are looking for ?
cheers
tom

2 Likes

Can these various features b used in Blocs?

1 Like

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,

Does this mean add a custom class?

I was meaning adding the CSS into the code editor. These units are not in the class manager, so you can’t add them there.

2 Likes

Nice. Didn’t realise that was there. Looks to do the same thing you are after :smiley: