Streaming live at 10am (PST)

Div displayed although display:none


#1

Hello, I’m so frustrated and need any help I can get!

This is my preview link:
https://preview.webflow.com/preview/folloze-developmentdev17?preview=50c199c0fe462c3ab9f231e401f29909

I have a div named “mobile request demo form” which I don’t understand why is it displayed in phone portrait view, since I’ve defined it as display: none and visible only on phone-portrait.

I did manage to hide it using:
@media (max-width: 479px)
{
.mobile-request-demo-form{
display: none !important;
}
}

but then I can’t manage to get it displayed when clicking on the relevant menu item.

Thank you in advance for your help!
Naama.


#2

Hi.

There’s a bit of mixup between the display:none css settings and the visibility settings in the Settings tab, it seems.

My advice to make it all work is to redo it a bit from scratch and only use the CSS properties from the Style tab, and not using the visibility settings at all (because in the end, they use CSS anyway, so if you understand the display:none property and the responsivity, well, you don’t need the devices visibility settings.

Also, you’re using a Symbol, and to make things easier, you should nest things with one more level of div so you don’t have a div that’s a symbol and that has display settings at the same time.

So redo your element like this:

⇢ a div that will become a symbol, with no visibility or display property
⇢ ⇢ a div inside with the display:x property, depending on the device
⇢⇢⇢ your form inside of that div with the display properties

This way, I’m sure it will work, it will be clean and easy to maintain. And you’ll never wonder if there are some properties on the element that serves as a symbol. in a general manner, avoid putting properties on the elements that you use for symbol wrapping. It’s ok to nest things more and to use each level for different role (one for visibility, one for layout, one for style etc…).

Edit: note that you can also simply just reset the visibility settings as shown below and your element will behave as you intended it to.


#3

Thank you so much @vincent, I did what you suggested and it worked! :pray:


#4

This is correct. Visibility settings overrides everything else. I completely avoid touching those controls as it even overrides flex (possible bug).


#5

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