How to hide div for specific height or width using CSS [duplicate]

Question

I'm creating a responsive website. I use something like this for hiding some elements for mobile display:

@media (max-width: 599px) { 
.hidden-mob{
         display: none !important; 
    }       
}

// and then add "hidden-mobile" class for arbitrary elements

Now I need to check some elements from the height aspect. I tried this: @media (max-height: x) but I don't know why it does not work. Also it should be noted that I need to a OR, I want this condition:

If current-height <= x or current-width <= y Then hide element

How can I implement the above condition using CSS ?

Answer 1

Use , to implement the OR condition.

@media (max-width: 599px), (max-height: 700px) {
  .hidden-mob {
    display: none;
  }
}

<div class="hidden-mob">Hidden below 599px width or when height is below 700px</div>