Adding a class to an element only on specific breakpoint

Hello everyone,

Straight to the point: is it possible to add a class to an element only on a specific breakpoint?

I am using a utility-first classes approach to Webflow, so my main heading in the desktop breakpoint is called “heading-xl”. It looks like this:

On the mobile breakpoint, I would like to apply my utility class “heading-xs” instead, because currently it looks like this:

My plan was to switch the “heading-xl” to the “heading-xs” class, or simply add a breakpoint prefix “sm:heading-xs” only on the mobile breakpoint.

This is similar to what is done in TailwindCSS, which works really well. But I’m finding that in Webflow, classes you add, switch, or remove on a specific breakpoint apply to all of the breakpoints.

Any workarounds, solutions?
Thank you!

2 Likes

Would love to know this as well. It would be so valuable if this is somehow possible.

1 Like

use @layer components and @apply