I believe you have an extra set of brackets. Try this:

@media only screen and (max-width: 640px;)
.mobile-hide {
visibility: hidden; display: none !important;
}

You might be confusing the browser by using both

{visibility: hidden;

and

display: none !important; }

because display: none removes the element (<div> in this case) and visibility: hidden; does not remove the element, but only makes it invisible. It still takes up the same space as if you could see it.

You know that if you want to find errors quickly in your css you can use the tools at w3.org's CSS Validator [jigsaw.w3.org] and it will list any errors or warnings it finds. You can paste in your css or upload a file or use an online URL. That is always my first stop for troubleshooting if I can't spot anything wrong but it isn't working the way I expect.

This is correct except, as not2easy mentioned, remove the visibility:hidden.

@media only screen and (max-width: 640px;) {.mobile-hide {display: none !important; } }

Hi there lzr0,

the actual cause of your problem was overlooked
by the three previous subscribers. :(

The semi colon here...

max-width: 640px;

...stops code rendering dead in it's tracks. ;)

birdbrain

@birdbrain

The semi colon here...

max-width: 640px;

...stops code rendering dead in it's tracks.

Bingo! This fixed it!

overlooked by the three previous subscribers

That's why it's a forum effort. Thanks birdbrain

D'oh