Classnames don't apply across different viewports

I’m running into the issue of class styles not being applied across different viewport sizes. I’m spending an inordinate amount of time basically restyling elements the exact same on several different viewports. This is confusing since I thought once you create a class name with a specific set of styles, that class name is now global and reusable wherever it’s being applied. Has anyone ran into this issue?

Hi @zackattack - When a class is assigned to an element that class is present across all breakpoints. When you style an element with a class, always start at the desktop. Styles cascade down and up (if you enable larger breakpoints) from there. If an element was styled on desktop, then tablet would inherit it unless you apply styles on that breakpoint (device). Mobile landscape would then inherit the tablet styles until overridden and so on.

If you are new to Webflow it can be a bit daunting. Even when you have built websites by hand, because there are some limitations with CSS in the designer. It is best to watch the videos that are available, to get a thorough understanding of how Webflow works.

Here is a course in the university about using styles in the designer.

Hopefully that will help you overcome your issue. If you’re stuck just pop back here and update your post and welcome to the forums!

1 Like