Unable to hide div for mobilephones

I have this code:

<style>
@media screen and (max-device-width: 800){
#mobile {
       display: none !important;
}
}
</style>

Code (markup):

then...

<div id="mobile">
bla...
</div>

Code (markup):

Unfortunatel the text is not hidden on my phone. What am I doing wrong?

 

A single media query without any supporting material is out of context. You need to post a link so we can see what might be interfering with the application of the media query.

Cd&

 

Actually, the problem is really simple. Eight-hundred WHAT? PX? EM? Quijada's? Widgets? Cell Phones? Redneck jokes? I'm seeing that a LOT lately...

@media (max-width:800px) {

NOT that 800px is 800 wide friendly (gotta make room for the scrollbar) -- OR that you should be doing media queries in pixel based breakpoints since your layout should also be elastic -- OR that if it's good enough to be in the markup you should be setting it to display:none -- OR that you should be needing to say "screen" on your media query if you are properly including your stylesheet with the MEDIA attribute on your LINK tag, since media queries are the next logical step AFTER media targets -- OR that you should be needing to say !important unless you have broken specificity --- OR that you should be targeting by device-width instead of just max-width. since not all devices report device-width properly if at all!

Also, are you setting the "we know what we are doing with resolution and font-size" using a viewport meta and the two vendor specific -text-size-adjust methods?

 

Ooops missed the lack of unit. Does age diminish capacity or just make the stupid part of the brain dominant?

 

It's actually part of the flaw of perception -- you are so used to seeing it there you see it there even when it isn't. It's actually a relative of cognitive dissonance and is how magicians and mentalists get away with their shows -- and how things like the "Wicked bible" came to make it past the editors.

One of the best tricks to avoid it and to learn to see such things right away is to read through it backwards. It makes the brain have to work harder to see things and as such makes mistakes stand out more; It's a common technique used by professional print editors and something that as a programmer I've found works wonders for seeing what SHOULD be obvious -- but isn't!

See the simple mistake of leaving off a unit of measurement -- you could run that past twenty people and likely only have two notice it. Professional writers can hit this problem all the time when text wraps, which is why in modern practice it's not uncommon to resize the window to change where the wrapping is as part of proof-reading as suddenly errors you'd miss show up -- which is part of why I take people to task for stuffing everything onto single wrapped lines in their markup and CSS. It actively encourages making perception mistakes.

Like the mentalist trick of putting up a sign that reads:

     I
    LOVE
 PARIS IN THE
THE SUMMERTIME

Code (markup):

Put that on a sign in 3" tall letters in a triangle, and ask people what it says -- 90%+ of the people you ask won't see the typo. FREAKY STUFF.

We all have a very narrow perception of the reality around us, and the brain uses "fast thinking" instead of problem solving whenever it can... and that can lead to some really big flubs on the simplest of things.

 

Good; it means I'm no more defective then the young kids on the site.

 

You should write px too that is max-device-width: 800px