CODEWITHSUNDEEP
cssresponsive-designresponsive
Ryflex
Ryflex

Reputation: 5769

Media query not applying to large mobile devices (tablets)

I've got some media queries that aren't working correctly for me, basically the css below is supposed to show some elements on desktop and some elements on mobiles.

For example, hiding some "hover" elements on mobiles/tablets but making them visible on desktop devices.

@media (max-width: 1024px){
    .desktop_only {
       display: none !important;
    }
}
@media (min-width: 1025px){
    .mobile_only {
       display: none !important;
    }
}

Granted in CSS4, we will be able to do this much easier using the 'pointer' feature: https://drafts.csswg.org/mediaqueries/#pointer but I can't use that because that's the future, not yet implemented.

I tried using:

<script>
    document.documentElement.className += 
    (("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>

I've tried using Modernizer too, which is supposed to also add the touch/no-touch

With:

@media (max-width: 1024px){
    .touch .desktop_only {
       display: none !important;
    }
}
@media (min-width: 1025px){
    .no-touch .mobile_only {
       display: none !important;
    }
}

But it doesn't work, it's not hiding elements correctly. I've also tried them without the @media (xxxx: 102x) part but that doesn't work either. I've also tried switching touch and no-touch over just in case I had them wrong.

I can't use the css: -moz-system-metric(touch-enabled) as it's not supported by many browsers

Unsure how I can use http://detectmobilebrowsers.com/ to do what I want

Anyone have any clues what I am doing wrong?

Upvotes: 0

Views: 382

Answers (1)

Michael Mano
Michael Mano

Reputation: 3440

basiclly your medias are wrong, See min-width and max-width, do this

.mobile-only {
  display: block;
}

@media (min-width: 1024px){
  .desktop-only {
    display: block;
  }
  .mobile-only {
    display: none;
  }
  .desktop-only:hover {
    color:#000;
  }
}

don't use underscores

Edit - here is mine

/* ===============
 DISPLAY SETTINGS
 =============== */

@media all and (max-width: 43.688em) { /* 489px */

    .mobile-is-hidden { display: none; }

}

@media all and (min-width: 43.688em) and (max-width: 61.188em) { /* 699px to 979px */

    .pad-is-hidden { display: none; }

}

@media all and (min-width: 61.250em) { /* 980px */

    .desk-is-hidden { display: none; }

}

Upvotes: 2

Related Questions