Streaming live at 10am (PST)

Symbol and percentage top margin


I have trouble to work with percentage margins and symbols.
I have created a symbol with a title, a div (black line) and a paragraph. That symbol will be inserted into various kind of sections with different heights (basically 100vh and 60vh).

The idea is to have the symbol starting roughly at the middle of it’s parent height. I don’t want the symbol to be centered but only to start at the center.

Since the symbol’s parent is a section, I have configured the section with a top justify property while using a 45% top margin for the symbol. The result is meeting my expectation…but not in every configuration.

With a 100vh section (were I created the symbol first), there is no issues. The symbol positioned at 45% of the section height, set at 100vh. No issues here.

Elsewhere in my site, I need to use the very same symbol with a 60vh section. I assumed that with a percentage top margin, the symbol will start at 45% of the parent section top. Well, that is not the case…

It’s like the symbol don’t care about it’s parent height but kept it’s initial parent height. And I am not even sure about that because it seems the symbol is way to low to be using a 45% offset from a 100vh section in that case.

Maybe I am doing something wrong, maybe Webflow have an issue there.

The read-only link: