Stronger visual indication of "non-base breakpoint" status

I realize that some of learning Webflow is a "this is just how we do things, just get used to it through muscle memory" kind of thing, and the issue of accidentally making CSS changes outside of the Base Breakpoint meaning for those changes to be global is one of those. But I feel like it's awfully easy to forget that you're not in the Base Breakpoint right now and that making it more visually clear that that's the case is feasible.

I can't speak necessarily to what that would look like, but I could envision tinting the current breakpoint tab red or yellow (i.e., "you're actively responsive editing!") and adding a line of the same color below that/across the Editor viewport. Having that strong visual indicator in people's peripheral vision would help avoid situations where you curse to yourself and re-create all the CSS work you just did (obviously I speak from experience here).

  • Whit Gurley
  • Nov 21 2022
  • Aidil Goh commented
    30 May, 2023 04:22am

    I notice that I tend to accidentally edit the non base breakpoint mode when I come back to the designer tab after a short coffee/toilet break 😅

    I'd suggest something like a Green background for default breakpoint, yellow for the rest...

    And perhaps a prompt that warns me after I've been away from the designer tab for a while..