Menu
This is the code that I have tried:
@media screen and (max-height:450px) and (height<width){
.hero-text-box{
margin-top:25px !important;
}
}
428
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. Each query in a comma-separated list is treated separately from the others.
If you want to describe the screen height, you have to use mediaqueries: device-height. The second example describes viewports with height of 700 pixels and higher. The third media query describes all viewports with a height not bigger than 699 pixels. @media screen and ( height: 400px ) { … }
Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device.
You can check for orientation like in the other answer, OR you can check for the aspect-ratio:
@media screen and (max-height:450px) and (min-aspect-ratio:1/1){
.hero-text-box{
margin-top:25px !important;
}
}
Old question but posting an answer which future visitors might find helpful. One way to achieve height > width or vice versa is using viewport.
For Example,
@media (max-width: 100vh) { background-color: red; }
This will only set the background color to red when the height > width for the opposite use min-width instead of max-width
Note that these 2 are equivalent
@media (max-width: 100vh) { background-color: red; }
@media (min-height: 100vw) { background-color: red; }
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
