Menu
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.
738
The height media query's value is usually the width media query value divided by the screen's aspect ratio. The height media query is always equal to document. documentElement. clientHeight.
Use a comma to specify two (or more) different rules: @media screen and (max-width: 995px), screen and (max-height: 700px) { ... } Commas are used to combine multiple media queries into a single rule.
Combining media query expressions Max-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.
Use height: auto in the media query. That's the default setting. It will overwrite the fixed height in your standard CSS. Save this answer.
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.
184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
