Design View element height significantly different from Preview

I’m a veteran web developer and I can’t seem to figure out what’s happening. I have been working really hard to set my menu bar height to a very narrow height, and was unable to remove what looks like padding.

However, when I take a look in Preview mode to my surprise the menu bar is as I expect it to be with no padding.

I double checked to make sure I’m editing the right breakpoint (desktop breakpoint) and that I’m seeing it large enough in the design view so as not to accidentally trigger any of the smaller breakpoints (not sure if that’s how it works, but I’m just taking precautions).

IMAGE ONE is how it looks (correct) on Desktop Preview
IMAGE TWO is how it looks (incorrect) in the Desktop Designer

I’m only a few hours into webflow but if I’m already encountering these kinds of bugs I may just go back to hand-bombing my CSS like I’ve been doing for 20 years.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

After a bit more sleuthing, turns out it’s the (currently) empty “Brand” container of the navbar element that is causing the discrepancy. This is still strange as that brand element is completely empty and has no fixed dimensions, margins or padding so should just collapse down to nothing.

I wonder if Designer sticks some arbitrary dimensions on that thing just so beginners will be able to select it more easily?

Yes, I can confirm that Designer is adding that padding to the empty element. I guess this is to help newbies find it? Not sure.

Is there a way to disable this so we can get “proper” WYSIWYG inside Designer view? Like a “collapse empty” toggle or "remove “wf-empty” class? I suppose that would create more problems than it solves.

HTML from the Preview mode

HTML from Design mode - notice the extra .wf-empty class?

Sure enough .wf-empty has some padding that changes how that element renders in Design mode as a result.
Screen Shot 2020-12-02 at 1.06.35 PM

Hey Tom

You are absolutely correct. If I remember correctly you can turn this off by unchecking show empty elements. Maybe that helps?

1 Like

Brilliant! Yes thank you - not where I expected to find that option, but now I know where to look.

Thanks for the quick answer!

T

1 Like