How can I delete an inheriting selector on a specific breakpoint in Webflow?

When trying to remove an inherited style for a selector on a specific breakpoint in Webflow, you can't delete the selector outright—but you can override or reset the styles to nullify its effects at that breakpoint. Here's how to do that:

1. Understand Inheriting Selectors

• Webflow uses cascading CSS, which means styles defined in larger breakpoints (like Desktop) automatically carry over to smaller ones (like Tablet or Mobile).
• When you see a style marked as inheriting, it comes from a parent breakpoint.

2. Switch to the Target Breakpoint

• Use the Breakpoints bar at the top of the Designer to switch to the screen size where you want to change the style (e.g., Mobile Portrait).
• Styles defined specifically at this breakpoint will override inherited ones.

3. Override or Reset Inherited Styles

• Select the element with the inherited class.
• Look for purple-highlighted styles in the Style panel—these are inherited.
• To override:
• Click into the style field (e.g., margin, font size) and enter a new value.
• To reset to default (remove the inherited style):
• Click the blue "Reset" arrow next to the style property. This doesn't delete the entire class, but it removes the style's effect at this breakpoint.

4. Optional: Use Combo Classes to Isolate Styles

• If you need completely different styles without affecting other breakpoints, consider using a combo class (e.g., Button Light + Mobile-Only).
• This allows you to define unique styles just for specific cases.

5. You Cannot Delete Inherited Selectors Per Breakpoint

• Webflow doesn’t allow removal of a class only at a specific breakpoint.
• You can only override or reset the styles, not delete the selector from that breakpoint alone.

Summary

You can't delete an inherited selector at a specific breakpoint, but you can override or reset its styles locally. Use the breakpoint view to modify specific styles, and use combo classes as needed for breakpoint-specific designs.