5

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 ?

Shafizadeh
  • 9,960
  • 12
  • 52
  • 89

1 Answers1

12

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>
m4n0
  • 29,823
  • 27
  • 76
  • 89
  • worked correctly, tnx, +1 upvote for you ... – Shafizadeh Sep 09 '15 at 16:22
  • just for more information I like to know, what sign means `and` in css ? – Shafizadeh Sep 09 '15 at 16:23
  • 2
    `and` will check if both conditions are true. So if you replace `,` with `and` in the above code, text will be hidden only when both height and width are reduced below 700px and 599px respectively. – m4n0 Sep 09 '15 at 16:25
  • 1
    Check out more on: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries – m4n0 Sep 09 '15 at 16:25
  • sorry for asking again, but can you please tell me what is `screen and` that sometimes used after `media` ? (and when should I use it ?) – Shafizadeh Sep 09 '15 at 16:30
  • like this: `@media screen and (max-width: 599px) {}` – Shafizadeh Sep 09 '15 at 16:37
  • 1
    There are various media types: media_type: all | aural | braille | handheld | print | projection | screen | tty | tv | embossed Your code will be limited to screen media supporting devices. – m4n0 Sep 09 '15 at 16:39