How can I troubleshoot a custom code solution for a max-font-size property in Webflow that is not working properly on different screen sizes?

TL;DR

Use clamp() for responsive font sizing instead of non-standard properties.
Ensure custom CSS is correctly placed inside <style> tags in the <head> or before </body>.
Check for style conflicts using browser dev tools and apply stronger selectors or !important if necessary.
Test styles across all Webflow breakpoints using media queries where needed.
Publish the site and clear browser cache to see changes.
Use the Style Panel’s clamp() support to avoid external custom code.

If your custom code for max-font-size is not behaving correctly on various screen sizes in Webflow, here’s how to thoroughly troubleshoot and fix the issue.

1. Check for Syntax Errors or Invalid CSS

Inspect the custom code you’ve added (usually in the Page Settings or Site Settings > Custom Code).
Ensure you're using valid CSS. Remember, max-font-size is not a standard CSS property; you likely meant to use a CSS clamp() function, or manage it via media queries.

Example of a correct usage:

font-size: clamp(1rem, 2vw, 2rem); sets a fluid font size with a min and max limit.

2. Verify Placement of the Custom Code

If you're using CSS in the <style> tag, make sure it’s placed inside the <head> (before </head>) or before the closing </body>.
Custom code placed incorrectly (e.g., in the wrong embed block or without <style> tags) will be ignored.

3. Override or Conflicts with Webflow Styles

Webflow's styles or classes may override your custom code.
Use browser dev tools (Inspect Element) to see what CSS is being applied.
If needed, add stronger selectors or use !important (sparingly), e.g., font-size: clamp(1rem, 2vw, 2rem) !important;.

4. Test across Breakpoints

Webflow offers multiple responsive breakpoints (e.g., Tablet, Mobile Landscape, etc.).
Check whether your custom code behaves correctly across all breakpoints.
If needed, conditionally load styles by using media queries inside your custom CSS.

Example:

<style>
  h1 {
    font-size: clamp(1rem, 2vw, 2rem);
  }

  @media (max-width: 480px) {
    h1 {
      font-size: 1.2rem;
    }
  }
</style>

5. Clear Cache and Publish

Custom code won’t apply in Webflow Designer. You must publish the site to see the effect.
Always clear browser cache or use Incognito Mode to ensure updates are reflected.
Mark changes in Page Settings > Custom Code or use the Embed element for inline CSS when controlling a single element.

6. Consider Using the Clamp Function in the Style Panel

Webflow now supports the clamp() function directly in the Style Panel (for font-size).
You can apply clamp() in the custom CSS field for a particular element, removing the need for custom code.

Summary

To fix a non-working custom max-font-size in Webflow, use clamp() for responsive font sizing, verify your code placement and syntax, ensure no style conflicts, and test under all breakpoints. Always publish and clear your cache to see custom code changes take effect properly.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer