Streaming live at 10am (PST)

Elements that inherit from body? OR... nowhere? Kill me now

I just went through way over an hour of hell because… well I have no clue! I was styling buttons in a slider, assuming that it was also styling another set of buttons in pagination with the same classes along with the icon inside also with the same class. NOPE. Adding the same class to the “icon” with a star didn’t do anything to all the rest of them. What’s the point of classes if it doesn’t work for everything on the site?

On top of that, some of these “special” built-in elements seem to inherit odd paddings and other properties from… the body? From the metaverse? I just went through fumbling around for ages… sometimes the settings would literally revert to zero, but then when I edit them they seemed to magically reappear. Mind numbing. Other of these magical elements seemed to show they were yellow and inheriting settings from something else, but… the body? Why would the body be styling an “icon?” What is this star icon anyway?

In the end I just ended up cutting and pasting the actual icon elements from one page where they worked to another where they did not inherit the styling, but it makes NO SENSE to me why or how this worked. What is this logic? Where is the documentation for all of this? It seriously is sucking my life and soul away.

EDIT: attached is a live example… this right pointing icon has this 19px margin, the left one with the same class… does not! Where are these coming from? The screenshot shows the highest level of hierarchy and for inheriting and… I don’t know what else to say. Madness.

I have a very similar problem with fonts… The css classes in the exported code do not correspond to classes inside Webflow. They are inherited from another dimension, I presume.

I’d suggest, export the css and look in it to see where this weird behaviour is inherited from.

In my case it does not help, but it is worth a try

If you can’t export the code in webflow, you can inspect the element in chrome and look for css this way.

1 Like

Webflow is nothing but a very nice graphical layer to control CSS, animations, html pages, and collections (dynamic data) for the web. There is an assumption that you understand the fundamentals of each. Webflow has done a great job on courses where the ins and outs of using Webflow are covered in great depth. If you are struggling with particular concepts of Webflow then I recommend you watch the related video in the University. Here are a couple that apply.

Thanks, but I think you totally missed the point of my post. The ranty bit, sure was unclear. BUT, the screenshot gets straight to the point. There’s clearly some hidden undocumented details built into a lot of elements in Webflow. If these counteract each other, or are semi-hard coded into things beyond even the body, how are we supposed to understand what’s going on? Again, as my screenshot should clearly show - there’s some kind of 19px margin coming from somewhere even beyond the body, that affects one of the so called “icons” built into pagination or sliders (also of note, which also magically change shape when you change the font… errr icon?). So… Where o where is this documented? And, why does this 19pt margin evaporate on the lefthand arrow “icon” yet still remain in the same place?

As Martin points out above, there’s clearly some fundamental architecture problems or mystery “behaves as intended” so called “features” that in the end cause nothing but bewilderment and confusion. None of those references help with this at all, and as stated, it seems to be documented likely, or even if, internally at Webflow HQ. This pops up constantly.

NONE of your references point out this mysterious “icon” element, nor why it ignores classes/tags. Please, point me to where that’s documented, and I’ll buy you a beer or beverage of your choice.

Well since you did not share a read-only there is nothing to look at except a picture with no context. All I can say from that screen grab is that you can’t access the properties of BODY ALL PAGES while the BODY is not selected.

Pretty sure the context is all there, you can see the selected element, and the mystery padding that comes some where “above” the body tag that is the top parent of the element.

https://preview.webflow.com/preview/siam-seaplane?utm_medium=preview_link&utm_source=designer&utm_content=siam-seaplane&preview=d80ae0389bddbc0618feea3bc7239e34&pageId=614b0fda4184353232b9d132&workflow=preview

Have at it. Even more amazing, some how the top and bottom 19px padding from the original screenshot is just suddenly gone into the ether. Still no idea where the side padding comes from. Any clue?

Looks like you copied an element from slider. Slider elements have built in styles to make them work so you don’t have to code them from scratch. That element is inheriting this style.

.w-icon-slider-left,.w-icon-slider-right {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 1em;
    height: 1em
}

But, still… where does that 19px padding come from? Why don’t added style classes seem to effect these elements? Or, only partially? And, where is this documented? How would I even know any of this? Why have built in styles that are immutable?

Like Martin above, and others all over this forum… these kind of issues have been known for years, yet still… Why do I have to analyze code for a #nocode product just for something as simple as styling some buttons? But, thanks for trying.

The 19px is the computed value of margin auto. That is the how the icon is centered in its container. You can avoid this by not copying elements from webflow components and instead creating them yourself. Webflow can’t reduce the complexity of the product and still cater to users with more advanced needs. And as for the documentation, it is in your browser dev tools.

Except there’s confusingly no padding on the left pointing arrow. It doesn’t even show in your dashboard screenshot. Pagination is a slider, is it not? But, again, none of this is documented anywhere so who knows what their thinking is. Documentation is… documentation i.e. a manual that describes the untouchable built-in functionality of these drag and drop semi-editable components, not using a developer dashboard to read code for a #nocode product (Webflow’s term, not mine). Plus, your so-called documentation doesn’t tell me which styles I can edit with the standard Style editor and which are not; no indication of that whatsoever in their own product.

How can I design a button if the core functionality of it is hidden or a style property simply don’t apply? I can’t even make a rollover for these buttons because, unlike one would expect with CSS, the parent button area div settings don’t cascade down to that “icon” (which is actually seemingly a text character not an icon).

This complicates things, it doesn’t simplify them. Some PM at Webflow has seriously done damage to the UX of this product.

EDIT: now the top and bottom padding is magically back. Again… insane.