Skip to content

Instantly share code, notes, and snippets.

@oooh-boi
Created September 27, 2022 13:20
Show Gist options
  • Save oooh-boi/1e35cf23ff2386be1e2113ff1efb496d to your computer and use it in GitHub Desktop.
Save oooh-boi/1e35cf23ff2386be1e2113ff1efb496d to your computer and use it in GitHub Desktop.
Fluid Typography in Elementor
<style>
.elementor-kit-4 h1 { font-size: clamp(2.369rem, 2.0686rem + 1.502vw, 4.209rem); }
.elementor-kit-4 h2 { font-size: clamp(1.777rem, 1.5517rem + 1.1265vw, 3.157rem); }
.elementor-kit-4 h3 { font-size: clamp(1.333rem, 1.1639rem + 0.8457vw, 2.369rem); }
.elementor-kit-4 h4 { font-size: clamp(1.333rem, 1.2605rem + 0.3624vw, 1.777rem); }
.elementor-kit-4 h5 { font-size: clamp(1.2rem, 1.1783rem + 0.1086vw, 1.333rem); }
.elementor-kit-XXX { /* replace XXX with your own Site Settings kit ID */
--e-global-typography-XXXXXX-font-size: clamp(1.0625rem, 0.9707rem + 0.4592vw, 1.625rem); /* any custom font 1 ... replace XXXXXX with your own */
--e-global-typography-XXXXXX-font-size: clamp(0.8125rem, 0.7921rem + 0.102vw, 0.9375rem); /* any custom font 2 ... replace XXXXXX with your own */
font-size: clamp(1rem, 0.9694rem + 0.1531vw, 1.1875rem);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment