Save time and gain control of your webflow site.
Wizardry is a responsive technique using EMs that scales like VW but with a max width.
Line Height Calculator
Percentage Calculator
Max Width Calculator
Container Max Width
px
<style>
@media only screen and (min-width: 1920px) {
body {font-size: 1.2em;}
}
</style>
@media only screen and (min-width: 1920px) {
body {font-size: 1.2em;}
}
</style>
Set this value to the max width of your container and add this code inside an embed on your page.
Min Width Calculator
Screen Width
px
Font Size
em
Class or Element
<style>
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.your-class-name {font-size: 0.9rem;}
}
</style>
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.your-class-name {font-size: 0.9rem;}
}
</style>
If any text is getting too small at a certain desktop screen size, use this to change the font size to px.