Webflow variable modes don't work on exported website

Design help General
1

I’m using variables with modes in my project, it works perfectly on webflow hosted sites, but on self hosted the modes functionality doesn’t work somehow. The issue is with mobile viewports, the mode doesn’t switch and I have desktop values for mobile.

Any thoughts how it can be fixed?

I wasn’t able to put the link for my website due the webflow policy, it’s weird. But I guess the problem is universal.

2

Hi there,

Variable modes in Webflow follow breakpoint inheritance rules. This means that values set on larger breakpoints (like desktop) will automatically apply to smaller breakpoints (tablet and mobile) unless you specify different values for those smaller breakpoints.

To set up responsive variable values:

  1. Open the Variables panel
  2. Select the variable you want to modify
  3. Click the breakpoint icon next to the variable
  4. Set specific values for each breakpoint as needed

When you set a value for a larger breakpoint, it will cascade down until it encounters a new value set for a smaller breakpoint. This gives you precise control over how your variables behave across different screen sizes.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

If your Webflow site’s mode switching works on Webflow hosting but not on self-hosted versions, the issue is likely related to how Webflow’s CSS variables and mode-related JavaScript are being exported. First, check if the wf-scripts.js file is included in your exported files—Webflow relies on this for certain dynamic features. Also, ensure that your CSS variables for modes are correctly defined in :root and that the JavaScript controlling mode changes is properly linked in your self-hosted environment. If it’s missing, you may need to manually replicate Webflow’s mode-switching logic using custom JavaScript.

1 Like
4

Thank you for the answer! I checked the export zip.

  1. No wf-scripts.js, only webflow.js (maybe you meant that)
  2. In css folder there are 3 files, the :root properties were in the one with weird name 23e7gsdh326ad.webflow.css.
  3. The :root variables were defined correctly, even the @media were set to change the variables values, BUT the values across all media were the same, basically it’s an export bug. I have already asked the Support, will be waiting for an answer.
:root {
  --_responsive---padding-section-large: 5.5rem;
  --_responsive---padding-horisontal: 2rem;
  --_responsive---radius-section: 4rem;
  --_responsive---padding-horisontal-small: 2rem;
}

This is how it “changes” on @media

@media screen and (max-width: 767px) {
  body {
    --_responsive---page-padding: 2rem;
    --_responsive---padding-section-large: 5.5rem;
    --_responsive---padding-horisontal: 2rem;
    --_responsive---radius-section: 4rem;
    --_responsive---padding-horisontal-small: 2rem;
  }
5

Hi,
Did you get any updates from Webflow support regarding the variable modes export bug? I’m experiencing the exact same issue on a self-hosted project. Thanks in advance for your reply!