media query for min-height

Question

I want to write media query based on screen resolution. My screen resolution height is 768. I wrote media query for this as:

@media(min-height:768px) and (max-height:850px) {
   .video-contain{
     margin-top:110px;  
    }
}

My above media query is not working.margin-top is not set before. I wrote media query based for screen resolution but not browser height.

Use `min-width` and `max-width` instead of height. Has that worked? — Ali Gajani, Feb 23 '17 at 05:44
ya working but I have various height(900px and 1200px ) for width 1600px — user3386779, Feb 23 '17 at 05:46
you need to use javascript or jquery for check window.height based on that set your top margin...media queries use only for min/max width..its not works for height.. — Darshak, Feb 23 '17 at 06:00

score 18 · Answer 1 · edited Feb 23 '17 at 06:30

18

Use:

@media screen and ( min-width: 850px ) and ( max-height: 768px )
{
   .video-contain{
     margin-top:110px;  
    }
}

NOTE: Always use max-width media queries to great effect.

edited Feb 23 '17 at 06:30

4b0

20,627
30
92
137

answered Feb 23 '17 at 05:55

Aditya Male

226
1
3

8

"NOTE: Always use max-width media queries to great effect" Can you explain why ? – Tarik Merabet Mar 06 '20 at 15:08
I wouldn't recommend using max-width and max-height with multiple breakpoints, due to the fact that the size in media queries is specified in logical layout pixels and the device logical size can take floating point values. For example it can be 768.5px, which would be greater than the max-width and below the min-width at the same time, so no media query would be applied. Take a look at the example here: https://jsfiddle.net/lexkrstn/g2te9b89/ – Alexander Korostin Jul 23 '21 at 16:24

Judd Franklin · Answer 2 · 2017-02-23T06:09:54.233

2

It seems like the issue is that your viewport is not the full resolution of your screen.

If you set the min-height to something lower, such as 720px, it ought to work.

 @media(min-height:720px) and (max-height:850px)
{
   .video-contain{
     margin-top:110px;
    }

 }

edited Feb 23 '17 at 06:09

answered Feb 23 '17 at 06:02

Judd Franklin

540
2
5
15

score 1 · Answer 3 · answered Feb 23 '17 at 05:58

1

//simple max-width query
@media screen and ( min-height: 600px ){
    background: blue;
    ....
}

This might help you.

answered Feb 23 '17 at 05:58

RRajani

411
3
10

score 1 · Answer 4 · edited Aug 02 '21 at 13:42

1

@media only screen and (max-width: 375px) and (max-height:667px) { }

edited Aug 02 '21 at 13:42

isherwood

52,576
15
105
143

answered May 18 '18 at 05:00

Rohaan Gulzarvi

11
1

score 0 · Answer 5 · answered Feb 23 '17 at 05:47

0

Please try this:

@media only screen and (min-width: 768px) and (max-width: 850px) {
}

answered Feb 23 '17 at 05:47

Kashish Agarwal

273
1
15

score 0 · Answer 6 · answered Feb 23 '17 at 05:53

You can define as like this.

@media screen and (max-width: 1600px) and (max-height: 900px){
    //code here
}

@media screen and (max-width: 1600px) and (max-height: 1200px){
        //code here
}

Or avoid mentioning width

@media screen and (max-height: 1200px){
            //code here
}

media query for min-height

6 Answers6

Linked