Scaling text in header

Hi,
I’m trying to build a header using Pro’s header builder.
The header uses only text (no images). Right now I use “em” for all sizing, as I thought that would provide for the best scaling across different devices.
As you can see in the screenshot, the first text (“Topografie”) does not scale correctly.
Which settings should I use to make sure that there is no text overflow and all header text will be scaled correctly?

Small Screens:

Hi There,

Thank you for writing in, Add a class on those text and lets resize them in certain screen width with media query:


@media (max-width: 767px) {
	.my-class {
		font-size: $$px;
	}
}

Or use a calculated value as font-size instead.

calc(4vw + 1em)

Let us know how it goes,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.