How can I change the base breakpoint in Webflow so that the changes I make on one breakpoint do not affect another breakpoint, even if it is the base breakpoint?
TL;DR
- The base breakpoint in Webflow is always desktop and cannot be changed.
- Use custom larger breakpoints, unique or combo classes, style overrides, and visibility controls to isolate styles across different viewports.
In Webflow, the base breakpoint (desktop) cannot be changed or reassigned—it's always the default starting point for styling and cascades down to other breakpoints. However, there are workarounds to maintain design separation across breakpoints.
1. Understand How Cascading Works in Webflow
- Webflow uses a mobile-first cascade. Styles set on higher breakpoints (e.g., desktop) cascade down to smaller breakpoints (tablet, mobile).
- Conversely, styles on smaller breakpoints override styles applied on larger breakpoints.
- The base breakpoint is always Desktop (>= 992px). You cannot set tablet or mobile as the default.
2. Use Larger Breakpoints to Isolate Styles
- Create a custom larger breakpoint (e.g., 1440px or 1920px) using the Add breakpoint option in the top bar of the Designer.
- Apply specific styles at that breakpoint so they don’t affect the default base (desktop) or lower.
- This allows you to make design changes without impacting smaller viewports.
3. Use Combo Classes or Unique Classes
- If you want elements to look radically different between viewports, use combo classes or unique class names to isolate styles.
- Then, apply those classes only on the desired breakpoints.
- This prevents shared styles from affecting other breakpoints.
4. Style Overrides on Smaller Breakpoints
- Make modifications on mobile/tablet breakpoints to override desktop styles when needed.
- While the base can’t be changed, this lets you effectively “disconnect” designs by making explicit overrides.
5. Use Visibility Controls
- Use Display: none on certain breakpoints to hide elements, and show alternate versions using duplicate elements with different classes or styles.
- While not ideal for performance, it’s a practical workaround when styling needs to differ drastically by device.
Summary
You cannot change the base breakpoint in Webflow—it's always desktop. Instead, use custom breakpoints, isolated classes, and override styles strategically to prevent changes at one breakpoint from affecting others.