How can I say "height < width" in a CSS media query?

Question

This is the code that I have tried:

@media screen and (max-height:450px) and (height<width){
    .hero-text-box{
        margin-top:25px !important;
    }
}

Answer 1

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

Answer 2

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