What "shadow" classes does Designer add to elements?

I’ve been struggling to understand some of the “magic” CSS that Webflow peppers in that you cannot control from the Properties panel. I’ve discovered “w-container” that cannot be edited, but imposes a 940 pixel max-width on all container elements (presumably) on the site.

Given that there’s this one, what other “gotchas” am I going to run into that are going to throw me for a loop? Is there a list somewhere of these Webflow “shadow css” and any way to just disable them so I can use this excellent tool like I want to?

Here’s the container selected in Designer

You can see that it has no specified dimensions, and yet…

The .w-container “shadow class” adds in a max-width that I wouldn’t have known about without some webdev “spidey sense” (and Chrome’s Dev Tools inspector)

Any other veteran web devs thrown for a loop by this stuff?

I’d probably consider the Container element to be a bit unnecessary for any somewhat advanced user as it’s essentially just a div block with some preset styles applied. You can actually modify the max-width for these elements to override the 940px size constraint, although unless I just want to throw together something quickly I opt to use styled div blocks instead.

You can see a little blurb about the Containers if you click the help bubble over the element in the Add panel (or read about it here):

image

As far as other “shadow” classes, I don’t know of any list that exists for reference but there is probably a handful of other instances where Webflow applies some styling to ensure elements work “out of the box”. Things like the navbar mobile menu and cart come to mind, however this is another situation where users can opt to make these components “manually” with normal div blocks and interactions.

1 Like

Thanks for that helpful advice on the “special” container element. I’ll be wary of these custom elements in the future when I know I want vanilla functionality!

Appreciate the tip.

1 Like