Streaming live at 10am (PST)

Builder doesn't match preview mode


#1

Since we still don't appear to have an


tool, I'm trying to create one by just giving a div block a border. I get it positioned exactly where I want it in the builder, and it's WAY off in preview mode. Is this normal? Screenshots below

Builder: See how the line is underneath the header?

Preview/Published: It looks more like a strikethrough...


#2

The designer is trying to be helpful by showing your div, section, and container elements even if they have nothing in them. In reality those elements have no height unless you set the height or have content within it.

I can't tell what is going on with your structure exactly, but I would suggest putting all of your content inside a div and then setting the bottom border on the containing div and using padding to manage the spacing.


#3

I guess I could do that, but then my "horizontal rule" will have to be the same width as my content div. =/

I hope we get a


function soon...

#4

You can also use right and left padding to create the visual effect of having the line extending beyond the content.


#5

I too cannot say for sure... But it looks like you need to set the height of the container with the bottom border set so that it makes the line appear in the correct position. Possibly removing margin and padding from the top of it?


#6

Hey @James_Welbes, have you tried this little switch in the left sidebar? It toggles the visibility of empty elements.

Also, if you give that empty element a class with an explicit height that does not exactly equal 75px, then Webflow should avoid rendering the technically-empty element with the empty outline. There's an example of this in the DemoKit site (look for the "Horizontal Divider" page), and looks something like this:


#7