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?
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)
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):
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.
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!
