Size of header not to overflow on different devices

[Paula_Menendez (Paula Menéndez)]

Hello! i’m new to webflow, but loving it so far! I"m strugging with making the header of a page change dynamically with each different device.

I have a header inside a column. On the desktop, i set the size of the title and it is fine. However, when i change to tablet vision, the title is too big to fit on the column and therefore overflow on the bottom ( see screenshot).
To fix it I just changed the size of the title for the tablet screen. However, I wonder if there is a dynamic way, so that the title size of the header is reduced to fit inside the column always and doesn’t overflow like that.

Thankyou!

How can I reduce the size dynamically?

---

Here is my site: www.islacollective.co

[dram (Alex Dram)]

@Paula_Menendez

if there is a dynamic way, so that the title size of the header is reduced to fit inside the column always and doesn’t overflow like that.

No, without some complex scripting this is impossible. You could use vw units for your font size here to make sure that when browser is narrower the letters are smaller, this will be more or less what you need.

[imtiazraqib]

@Paula_Menendez

I wonder if there is a dynamic way, so that the title size of the header is reduced to fit inside the column always and doesn’t overflow like that.

You could also look at the Wizardry technique By Timothy Ricks. It sets up your project for responsive typography.