CODEWITHSUNDEEP
htmlcssmedia-queries
user3386779
user3386779

Reputation: 7185

media query for min-height

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.

Upvotes: 21

Views: 80135

Answers (6)

Rohaan Gulzarvi
Rohaan Gulzarvi

Reputation: 21

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

Upvotes: 2

Aditya Male
Aditya Male

Reputation: 266

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.

Upvotes: 22

Judd Franklin
Judd Franklin

Reputation: 570

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

 }

Upvotes: 2

RRajani
RRajani

Reputation: 409

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

This might help you.

Upvotes: 1

Kakashi Hatake
Kakashi Hatake

Reputation: 3036

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
}

Upvotes: 0

Kashish Agarwal
Kashish Agarwal

Reputation: 333

Please try this:

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

Upvotes: 1

Related Questions