Section Div is being hidden when previewing site

This is obviously a major bug.

If you look at page 2 - and preview the page… the div hides! Very frustrating to say the VERY least. All divs are shown for all devices, but it hides nonetheless. I love Webflow - but this is a deal-breaker.

This isn’t a bug. You have your video set to absolute positioning and that’s causing your blue div to drop behind the video. Looking at your layout and how you have assigned widths you might want to rethink and use more padding and margins as opposed to setting items specific widths but maybe you have done that for a specific reason.

Hi @cjacobs627, as @jdesign mentioned, your div content with position set to Auto goes underneath the video set to position Absolute. If you set your video to relative position, the content underneath it will then show.

If you want to layer the div on top of the video, you can give the video absolute position with full cover and a z-index of 1. Next, give your content div overlay absolute position with full cover and a z-index of 2, so that the div overlays the video in the same space on the screen, just a higher z-index layer.

If you are trying to do something else, if you can help to let us know what your target design should be when finished, it will be easier to help advise :slight_smile:

OK, thanks. That was something I actually found to be the case… yes, I got that part. I think I screwed up on my explanation. The huge issue I’m having is when I use the “state” tool to hide and show elements based on “Desktop, Tablet…” etc… When I change the state back to show on all devices, the div’s that were set to not show… won’t show any longer on Desktop. I guess this would be another topic. Thanks for you help.

Have you watched the tutorials? It’s not the “state” that affects show/hide on different sized screens. It’s the hide or display: none (eye with diagonal) item in the display settings that changes per breakpoint.

Then why is there this?

@cjacobs627 Notice that that section is outline in Webflow’s “Empty Element” styling (see the dashed border?). It shows as a 75px high element mostly as a convenience so you can drag things into it, but it’s dotted outline indicates that it’s really empty and won’t have any height in preview (or published) mode.

You can click the “Show Empty Elements” option on the left sidebar to remove this “fake” 75px height and see it collapse in non-preview mode:

Also, you can give it any height besides 75px (e.g. I made it 76px above) and it will skip our “treat this as an empty element” code and treat it as a standard non-empty node even though it doesn’t have any children. Hope that makes sense - please let me know if it still doesn’t.


@cjacobs627 You could also use that if you wanted. It accomplishes the same thing basically although I didn’t look at the code to see the end result.

When you said “state” tool I thought you were referring to :smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.