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.
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.
