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.

Answer 1

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.

Answer 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;
    }

 }

Answer 3

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
}

Answer 4

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

Answer 5

Please try this:

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

Answer 6

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

This might help you.