Font-Scaling with screen dimension
-
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.
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 -
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
I don't answer or check forum DMs, please just post on the forum.
Before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it