How to scale down large headline so it looks the same on desktop and mobile?

Publishing help General
1

I created a large H1 tag in the hero section and it looks great on the desktop. But, when I click on the Tablet/Mobile buttons, the headline doesn’t scale down correctly.

At first, I had the font size/line height at around 100. Then, I adjusted those settings to 17 VH, but that hasn’t solved the problem.

The structure, if it matters, is section => container=> div => header. The Section Height is set at 100vh so it takes up the whole screen of the device.

What settings do I need to adjust to make the headline look about the same on mobile as it does on the desktop?

2

Can you please share with us us Webflow Read Only Link? Thanks! :wink:

1 Like
4

Hey @ckboddic

VH isn’t a common unit used on text. IT will be hard to use in the designer because it doesn’t show you height changes.

You can try using VW which will scale you text based on the view port width. I like using EM units on my text.

2 Likes
5

I would suggest you to reduce the font size & line height for the mobile view. That is how I scaled down large Headlines.

1 Like
6

You can try using a js pluging like Fittext vh and vw could work but WF don’t support css calc yet. Here’s a article about this Truly Fluid Typography

1 Like
7

This topic was automatically closed after 60 days. New replies are no longer allowed.