Flexbox breaks when Div Block Settings hidden on Desktop

Design help General
1

Hi there!
I have been struggling for hours with this mystery and I can’t crack it on my own, so here I am asking for the help of the community :slight_smile:

I am building a new navigation for my site, and I am now working on the mobile view.
I set a flexbox for the navigation and all looks fine, but when I hide the div block on desktop hell breaks loose and nothing works anymore.

This is how it looks like on tablet view before I disable it on desktop

29
292436×650 85.9 KB

And here is the setting panel for the same view
05
052436×824 189 KB

Now comes the problem: If I set the block to “Visible on: Tablet & Phone only”, everything breaks

39
392430×902 200 KB

But I didn’t change anything on the setting panel
56
561244×492 54.4 KB

I’m sure that I’m doing something wrong, but what? Also, I would prefer not to share the read only link, because it’s an active project with a bunch of things I cannot disclose… I hope it’s not a problem!

Thank you!

Chiara

2

You cut off the bottom of the screen so we can’t see the path of the div, or what it’s inside that may be effecting this. (another container is taking the place of the div when it’s disabled on desktop and that’s effected the mobile resolutions).

I don’t know if anyone here can help you without a read-only link.
I’d suggest duplicating the site and removing sensitive information. :slight_smile:

3

This is a known issue.

The workaround is to set it to display:none where you don’t want it seen, as opposed to using that visibility setting. This only affects flexbox display mode, as far as I am aware.

1 Like
4

Oh man, should have thought of that :slight_smile:

Thank you for your answer, I’ll try Cricitem’s workaround out and come back here with the results (and in case with a duplicate of the site to share)…

5

I see, thank you for the info! I’ll try out your method, and come back here with the results…

Thanks again!