If your exported Framer site shows the desktop layout on mobile (or vice versa), or a component looks visually broken at a specific width, the cause is almost always in how Framer structures responsive variants — not a rendering bug in your new hosting.
How Framer actually handles breakpoints
Rather than one fluid layout, Framer typically server-renders every breakpoint variant of a component into the same page — desktop, tablet, phone versions all present in the DOM simultaneously — and uses CSS classes (commonly prefixed something like hidden- plus a hash) combined with media queries to show only the one matching the current viewport. This is different from how most hand-coded responsive CSS works, where you have one layout that reflows with breakpoints, not multiple parallel layouts that swap visibility.
Why this breaks in some exports
A few specific failure patterns we've run into:
- The CSS driving those
hidden-*classes gets stripped or reordered during optimization, leaving multiple breakpoint variants visible simultaneously (a layout that looks doubled-up or overlapping), or none of them visible at all. - Class names get renamed by an optimizer trying to shrink output size, without correspondingly updating the CSS selectors targeting them — silently breaking the visibility toggle entirely.
- JavaScript-driven variant detection gets removed without a fallback, for components that use script (not just CSS media queries) to pick a breakpoint — this shows up as a component stuck on whatever variant happened to be first in the DOM, regardless of actual viewport width.
How to check if this is what's happening to you
Open your exported site, resize the browser window slowly through common breakpoints (roughly 480px, 768px, 1024px, 1280px), and watch for: content that doesn't change at all when it should, content that flickers between two states, or elements that are clearly present twice (one on top of the other, or one pushing the other down unexpectedly).
The fix
The safe rule for any Framer export tool: never rename Framer's generated CSS class names. It's tempting to want cleaner, human-readable class names in exported output, but Framer's own CSS (including every breakpoint-visibility rule) is written against those exact original names — renaming them without perfectly rewriting every corresponding selector is one of the highest-risk changes you can make to visual fidelity, and breakpoint-swap bugs are one of the most common symptoms when it goes wrong.