How can I use the "clamp" function with Webflow? I have already placed an HTML Embed code in the body to apply custom styling, and I have set the root with my variables. However, the "clamp" function is not working. Can someone help me with this issue in Webflow?
- Place your CSS with the
clamp()function inside a<style>tag in the Head section via Page or Site Settings. - Use correct
clamp()syntax and define any CSS variables at:root; publish your site to see effects live.
You're trying to use the CSS clamp() function in Webflow via a custom HTML Embed, but it's not applying as expected. Here's how to properly implement clamp() in Webflow and troubleshoot issues.
1. Verify Where You Placed the Custom CSS
- Webflow ignores HTML Embed code placed in the Body when rendering styles. For global CSS to work properly, it must be added in the Page Settings → Inside
<head>tag or Site Settings → Custom Code → Head section. - Move your CSS that includes the
clamp()function to the Head section.
2. Use Correct CSS Syntax
- Ensure your
clamp()syntax is valid. It follows this format:
clamp(min, preferred, max)
- Example:
font-size: clamp(1rem, 2vw, 2rem);
3. Confirm Root Variables Are Defined at :root
- If you're using CSS variables inside
clamp(), verify they’re properly declared:
```css
:root {
--min-font: 1rem;
--preferred-font: 2vw;
--max-font: 2rem;
}
```
Then use:
font-size: clamp(var(--min-font), var(--preferred-font), var(--max-font));
- Again, this declaration must be in a
<style>tag in the Head section.
4. Check the Scope
- Embedded CSS inside a single HTML Embed element only applies to that element and its children.
- For site-wide or page-wide CSS, always place styling inside the Head section as mentioned above.
5. Use a Style Tag Correctly
- Wrap your CSS in standard syntax:
```html
<style>
:root {
--min-font: 1rem;
--preferred-font: 2vw;
--max-font: 2rem;
}
.my-heading {
font-size: clamp(var(--min-font), var(--preferred-font), var(--max-font));
}
</style>
```
6. Publish and Test
- Webflow’s Designer may not always reflect custom styles in real time.
- Always publish your site to see if the
clamp()function is working properly on the live version.
Summary
To use the clamp() function in Webflow, move your custom CSS to the Head section, ensure the syntax is correct, and verify that your CSS variables are defined at the :root level. Publish your site to test the final effect.