Need to edit a line of text (more complicated than it sounds!)

[Marcus_Worsley]

Hey Guys,

I recently purchased a template and started to design my website. As you can see below I’m trying to get the word “Learnr” to fit on page across all web formats (desktop & mobile).

The obvious answer seems to be to reduce font size which does help to fit the word on the page, however when I do this it makes the font really big on mobile as per image below:

Any help would be much appreciated!!

Marcus

---

Here is my site Read-Only: https://preview.webflow.com/preview/marcuss-wondrous-site-d97262?utm_medium=preview_link&utm_source=designer&utm_content=marcuss-wondrous-site-d97262&preview=81a91d09ff24d579f98f1eb35ccf2bbb&workflow=preview
(how to share your site Read-Only link)

[Stan (justAnotherDeveloper)]

Responsive text using "clamp"

Maybe using an embed with this code: <style> body { font-size: 18px; font-size: clamp(16px, 2.5vmin, 18px); } h1 { font-size: 2.5rem; font-size: clamp(1.75rem, 5vmin, 2.5rem); } h2 { font-size: 2rem; font-size: clamp(1.5rem, 4vmin, 2rem); } h3 { font-size: 1.75rem; font-size: clamp(1.2rem, 3.5vmin, 1.75rem); } h4 { font-size: 1.5rem; font-size: clamp(1.1rem, 3vmin, 1.5rem); } h5 { font-size: 1.2rem; font-size: clamp(1rem, 2.5vmin, 1.2rem); } </style> Here an example: fluid ty…

Font-size clamp() generator

[Marcus_Worsley]

@Responsive text using "clamp"

body { font-size: 18px; font-size: clamp(16px, 2.5vmin, 18px); } h1 { font-size: 2.5rem; font-size: clamp(1.75rem, 5vmin, 2.5rem); } h2 { font-size: 2rem; font-size: clamp(1.5rem, 4vmin, 2rem); } h3 { font-size: 1.75rem; font-size: clamp(1.2rem, 3.5vmin, 1.75rem); } h4 { font-size: 1.5rem; font-size: clamp(1.1rem, 3vmin, 1.5rem); } h5 { font-size: 1.2rem; font-size: clamp(1rem, 2.5vmin, 1.2rem); }

Thanks so much for your help! I have put an embed on Hero Text (just the word “Learnr”) and copy pasted your code across. I’m afraid to say it hasn’t changed the placement / font size on desktop and the end of the word is still missing. Any other ideas?

[Schuschi_Eyes (Martin S.)]

If I understand you correctly, you want the word to “fill” the width of the screen, whether it is on desktop or on mobile. Am I right here?

If so:
Rather than using fixed units like px you could use vw (viewport width) as the unit for your font size. With that, the word should always use the same relative space depending on the screen size.

[Marcus_Worsley]

My problem at the moment is that everything looks great currently on mobile & 1280px and up as per screenshots:

My issue is when I’m viewing desktop format, the end of the word “Learnr” is missing as per screenshot:

I can change the font size on desktop to fit the screen, but if I do this, for some reason the font then becomes wayyyyy too big on mobile.

…Sorry I’ve just figured it out whilst writing this. I didn’t realise I could change font size across different viewing formats. NOOB HERE

Thanks to you both for your kind help

[Port_of_Folio]

Few ways you can do it but made short video showing how I would approach this. I wasn’t sure about the html embed you have in there, you might be able to remove it.

centering type

[Marcus_Worsley]

Oh wow that video was soooooo helpful!! Thank you so much for taking the time to do it, you’re a real one!