1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Unable to hide div for mobilephones

Discussion in 'CSS' started by Fracisc, Nov 23, 2014.

  1. #1
    I have this code:

    <style>
    @media screen and (max-device-width: 800){
    #mobile {
           display: none !important;
    }
    }
    </style>
    Code (markup):
    then...
    SEMrush
    <div id="mobile">
    bla...
    </div>
    Code (markup):
    Unfortunatel the text is not hidden on my phone. What am I doing wrong?
     
    Fracisc, Nov 23, 2014 IP
    SEMrush
  2. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #2
    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&
     
    COBOLdinosaur, Nov 23, 2014 IP
  3. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #3
    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?
     
    Last edited: Nov 23, 2014
    deathshadow, Nov 23, 2014 IP
  4. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #4
    Ooops missed the lack of unit. Does age diminish capacity or just make the stupid part of the brain dominant? ;)
     
    COBOLdinosaur, Nov 24, 2014 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,376
    Likes Received:
    1,853
    Best Answers:
    245
    Trophy Points:
    515
    #5
    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.
     
    Last edited: Nov 24, 2014
    deathshadow, Nov 24, 2014 IP
    COBOLdinosaur likes this.
  6. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #6
    Good; it means I'm no more defective then the young kids on the site.
     
    COBOLdinosaur, Nov 24, 2014 IP
  7. Naina S

    Naina S Active Member

    Messages:
    203
    Likes Received:
    7
    Best Answers:
    1
    Trophy Points:
    93
    #7
    You should write px too that is max-device-width: 800px
     
    Naina S, Nov 29, 2014 IP