Welcome to WebmasterWorld Guest from 18.204.56.104

Forum Moderators: not2easy

Message Too Old, No Replies

Hiding <div? in mobile phones

How to hide a page element in mobile browsers

     
1:54 am on Mar 19, 2017 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 15, 2010
posts: 43
votes: 0


Hi,
I am trying to hide a div in mobile phone. I have this in my css:
@media only screen and (max-width: 640px;) {.mobile-hide {visibility: hidden; display: none !important; } } 

In my page I have this:
<div class="mobile-hide" style="... ;">....</div>

but it does not work(checked in both iPhone6 and Android.
Am I doing it wrong?
2:56 am on Mar 19, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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;
}
3:12 am on Mar 19, 2017 (gmt 0)

Administrator from US 

WebmasterWorld Administrator not2easy is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Dec 27, 2006
posts:4563
votes: 364


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.
11:20 am on Mar 19, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2297
votes: 100


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

@media only screen and (max-width: 640px;) {.mobile-hide {display: none !important; } }
12:43 pm on Mar 19, 2017 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


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
3:23 pm on Mar 19, 2017 (gmt 0)

Junior Member

5+ Year Member

joined:Aug 15, 2010
posts: 43
votes: 0


@birdbrain

The semi colon here...

max-width: 640px;

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


Bingo! This fixed it!
10:22 pm on Mar 19, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


overlooked by the three previous subscribers
That's why it's a forum effort. Thanks birdbrain
3:46 pm on Mar 21, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 4, 2001
posts:2297
votes: 100


D'oh