Font-Scaling with screen dimension

[studiocool]

Hi Forum,

I couldn't find a post of someone with the same problem, so I'm opening one up here:

I've tried to define all sizes (dimensions and font size) in percentages. This works well for most aspect ratios, but becomes problemativ for extrawide formats (eg. 21:9).

I tried to set a 'max content width' in Lay settings, which applies to the grid, but fonts keep scaling further when widening the window.

EXAMPLE VIDEO

I tried to fix it myself by using custom CSS with a 'max font size' parameter as shown here, but had the feeling it was being ignored by my browser. (Edge)

Can you give me a hint on what class to apply the max font size to, or how to realize my idea?

Greetings,
Philipp

[arminunruh]

hey there!

yes, a percentage based font size is actually a "vw" size which means viewportwidth, so the content max width setting will have no effect on this

you can add your own media queries

when you take a look at your textformat, you see: "HTML Class:" _Headline1

(it will be a different word)

then create css:

lay options → custom css & html → Custom CSS
(dont put this in custom css for desktop or mobile)

@media (min-width: 1600px){
._Headline1{
font-size: 70px!important;
}
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries