Kevin Powell - Community•4mo ago

Media Query Not Working

Hi, I have a custom cursor that I would like to disable for mobile devices. However, the media query display: none that I'm applying dosen't seem to work.

<div class="media">
    <div class="cursor"></div>
  </div>

<div class="media">
    <div class="cursor"></div>
  </div>

@media (min-height: 420px)
  {
    .media {
      display: none;
    }
  }

.cursor {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 90%;
  pointer-events: none;
  z-index: 111;
  border: 3px solid white;
  background: white;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
  mix-blend-mode: difference;
  }

.expand {
  background: #FF004D;
  animation: moveCursor2 .3s forwards;
  border: 1px solid #FF004D;
}

@media (min-height: 420px)
  {
    .media {
      display: none;
    }
  }

.cursor {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 90%;
  pointer-events: none;
  z-index: 111;
  border: 3px solid white;
  background: white;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
  mix-blend-mode: difference;
  }

.expand {
  background: #FF004D;
  animation: moveCursor2 .3s forwards;
  border: 1px solid #FF004D;
}

23 Replies

Jochem•4mo ago

Are you sure you meant to use min-height and not min-width? is there a different selector for .media that overrides the display setting lower down? otherwise, share a live example in codepen or something similar, or just a live version of the code hosted somewhere

justfrastOP•4mo ago

I've tried that too. My page is a horizontal scroll so I don't know if that affects the media query. https://codepen.io/g0ldl/pen/PormRYG

Jochem•4mo ago

you've commented out the media query:

/* custom cursor 
@media (min-height: 420px)
  {
    .media {
      display: none;
    }
  } */

/* custom cursor 
@media (min-height: 420px)
  {
    .media {
      display: none;
    }
  } */

are you not using a code editor with syntax highlighting? also, just as a heads up, I really had issues using the cursor with the delay you introduced. Dampening the cursor's movement removes the direct feedback I need to position it correctly the first try

justfrastOP•4mo ago

I commented it out to show that there's the custom cursor. When I uncomment it and go into responsive mode, it doesn't react the way I expected it to. Thanks for the feedback, I'll fix that right away.

Jochem•4mo ago

ah, I found it. You should be using max-height rather than min-height the media query applies up to 420px with max, with min it's above 420

justfrastOP•4mo ago

Still doesn't seem to work for me ):

justfrastOP•4mo ago

/* custom cursor */
@media (max-height: 420px)
  {
    .media {
      display: none;
    }
  }

.cursor {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 90%;
  pointer-events: none;
  z-index: 111;
  border: 3px solid white;
  background: white;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
  mix-blend-mode: difference;
  }

.expand {
  background: #FF004D;
  animation: moveCursor2 forwards;
  border: 1px solid #FF004D;
}

/* custom cursor */
@media (max-height: 420px)
  {
    .media {
      display: none;
    }
  }

.cursor {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  border-radius: 90%;
  pointer-events: none;
  z-index: 111;
  border: 3px solid white;
  background: white;
  transition: all 0.2s ease-out;
  animation: moveCursor1 .5s infinite alternate;
  mix-blend-mode: difference;
  }

.expand {
  background: #FF004D;
  animation: moveCursor2 forwards;
  border: 1px solid #FF004D;
}

Jochem•4mo ago

works fine for me

Jochem•4mo ago

you could probably also do this with pointer: coarse, rather than relying on the screensize: https://caniuse.com/?search=%40media%20pointer

Jochem•4mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer

MDN Web Docs

pointer - CSS: Cascading Style Sheets | MDN

The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.

justfrastOP•4mo ago

Is media qeury based on the body or is it based on the axises.

Jochem•4mo ago

afaik it's based on the viewport

justfrastOP•4mo ago

so no matter how I rotate the page, height will always be straight up

Jochem•4mo ago

any type of scrolling shouldn't matter you're not rotating the page when you have horizontal scroll though

justfrastOP•4mo ago

I will check that out. I thought this is what this meant

article {
    display: flex;
    flex-direction: row;
    width: fit-content;
    height: fit-content;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100vh);
  }

article {
    display: flex;
    flex-direction: row;
    width: fit-content;
    height: fit-content;
    transform-origin: top left;
    transform: rotate(90deg) translateY(-100vh);
  }

Jochem•4mo ago

oh, yeah, that's a rotation. Still shouldn't matter for media queries, they use the viewport and you can't modify the viewport

justfrastOP•4mo ago

Thank you that clarifies it, still have to get it to work though.

Jochem•4mo ago

like I said, this works in my browser

Jochem•4mo ago

tested in chrome and firefox

justfrastOP•4mo ago

I'm running from VScode and just inspecting element in safari, could this be a potential error?

Jochem•4mo ago

doesn't matter how it's served, and I can't test in safari

justfrastOP•4mo ago

I think I got it to work with

@media (pointer: coarse)
  {
    .media {
      display: none;
    }
  }

@media (pointer: coarse)
  {
    .media {
      display: none;
    }
  }

Never knew pointer: coarse exists. I'll push it and test it on actual devices. It's working, thanks Jochem.

Jochem•4mo ago

glad to help!

Gaming

Programming

Media Query Not Working