Kevin Powell - Community•2y ago

best way to create a class/data-attribute to hide content on certain devices

Hey, what would be the best method to create a class/data-attribute to hide content on certain devices? I'm using a data-attribute here. For the example codepen, i'm trying to hide a div with display: flex; on it whilst on a mobile viewport, whilst having it display otherwise. The problem is, since the data-attribute is using display: none to hide the div once it gets to mobile, the display: flex; overrides it and it doesn't disappear. I can't utilize !important since if i put it on the display: none, it makes the div disappear altogether, and if i put it on the display: flex; it gives the same result as the initial problem. Is there a more efficient way to do something like this so problems like this aren't encountered. Thanks in advance. https://codepen.io/deerCabin/pen/oNOQQXm?editors=1100

CodePen

hidden-on-query

...

21 Replies

Shane•2y ago

use a media query

ἔρως•2y ago

unless you wanna do it from javascript, in which case you should stop and use a media query

snxxwyyOP•2y ago

alrighty, media query it is, thanks guys. is there no way to make it into a utility class at all though to prevent repeated code of hiding things haha?

ἔρως•2y ago

you mean, like .hide-desktop?

snxxwyyOP•2y ago

yeah exactly that

ἔρως•2y ago

the same way you do with anything else?

snxxwyyOP•2y ago

yeah, but in my example codepen i showed an issue with doing it the normal sort of way unless you mean put it in a media query like you said?

ἔρως•2y ago

it's a slightly tiny bit more complicated than that, but not a lot but yes, everything should be in media queries @media (min-width: 50rem) { <-- by the way, don't use rems on media queries

snxxwyyOP•2y ago

oh, hm, what would you suggest instead?

ἔρως•2y ago

pixels

snxxwyyOP•2y ago

would you mind explaining please? ah okay

ἔρως•2y ago

you have to set the display value inside and outside the media query

snxxwyyOP•2y ago

would you mind showing an example please?

ἔρως•2y ago

yes: check bootstrap

snxxwyyOP•2y ago

ohh bootstrap has it thanks

ἔρως•2y ago

you're welcome

snxxwyyOP•2y ago

so something along the lines of this?

@media (max-width: 900px) {
  [data-hidden-on="mobile"] {
    display: none !important;
  }
}

@media (min-width: 900px) {
  [data-hidden-on="desktop"] {
    display: none !important;
  }
}

@media (max-width: 900px) {
  [data-hidden-on="mobile"] {
    display: none !important;
  }
}

@media (min-width: 900px) {
  [data-hidden-on="desktop"] {
    display: none !important;
  }
}

ἔρως•2y ago

does it work?

snxxwyyOP•2y ago

indeed it does

ἔρως•2y ago

are you happy with it?

snxxwyyOP•2y ago

yeah it seems to be the most efficient way i can think of

Gaming

Programming

best way to create a class/data-attribute to hide content on certain devices

Did you find this page helpful?