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

Use the orientation parameter.

@media (min-width: 400) and (orientation: landscape) { /* rules */ }

Which does the following:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

Documentation on MDN

Answer 2

You can use the lanscape / portrait option:

/* Portrait */
@media screen (max-height:450px) and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen (max-height:450px) and (orientation:landscape) {
    /* Landscape styles */
}

I extracted the solution from: media query for browser size where width is less than height

Answer 3

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 4

Using (orientation:landscape) is a great option for this particular problem. However, you're going to want more ammo in your repository.

Sometimes you need to style for a specific device. Sometimes retina, sometimes HD, sometimes iphone 6+, etc. CSS-tricks.com has a great article (which has been updated since it's initial 2010 release) giving media queries for just about any device out there: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

I use Sass in my projects so I'v created a media query mixin (_mediaQuery.scss) for my projects. It's very rudimentary, but it gives me options when I need to style something for a specific device. Credits are in the comments:

/*Credit: David Walsh 10/22/2014
  https://davidwalsh.name/write-media-queries-sass
*/
$tablet-width: "";
$desktop-width: "";

@mixin tablet() {
 @media (min-width: #{$tablet-width}) and (max-width: #{$desktop-width - 1px}) {
  @content;
 }
}

@mixin desktop() {
 @media (min-width: #{$desktop-width}) {
  @content;
 }
}

/* **************************************************************** */

/*Credit: Josh Brewer, March 10, 2010
  https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/

@mixin retina() {
 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  @content;
 }
}

@mixin print() {
 @media print {
  @content;
 }
}

/* Smartphones (portrait and landscape)*/
@mixin smartphone() {
 @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  @content;
 }
}

/* Smartphones (landscape) */
@mixin smartphone-landscape() {
 @media only screen and (min-width : 321px) {
  @content;
 }
}

/* Smartphones (portrait)  */
@mixin smartphone-portrait() {
 @media only screen and (max-width : 320px) {
  @content;
 }
}

/* iPads (portrait and landscape) */
@mixin ipad() {
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  @content;
 }
}

/* iPads (landscape) */
@mixin ipad-landscape() {
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  @content;
 }
}

/* iPads (portrait)*/
@mixin ipad-portrait() {
 @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  @content;
 }
}
/* Desktops and laptops */
@mixin desktop() {
 @media only screen and (min-width : 1224px) {
  @content;
 }
}

/* Large screens */
@mixin large-screen() {
 @media only screen and (min-width : 1824px) {
  @content;
 }
}

/* iPhone 6-7 (portrait &; landscape)*/
@mixin iphone-current() {
 @media only screen and (min-device-width : 375px) and (max-device-width : 667px) {
  @content;
 }
}

/* iPhone 6 (landscape) */
@mixin iphone-current-landscape() {
 @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : landscape) {
  @content;
 }
}

/* iPhone 6 (portrait) */
@mixin iphone-current-portrait() {
 @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
  @content;
 }
}

/* iPhone 6/7+ (portrait &; landscape)*/
@mixin iphone-current-p() {
 @media only screen and (min-device-width : 414px) and (max-device-width : 736px) {
  @content;
 }
}

/* iPhone 6/7+ (landscape) */
@mixin iphone-current-p-landscape() {
 @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : landscape) {
  @content;
 }
}

/* iPhone 6/7+ (portrait) */
@mixin iphone-current-p-portrait() {
 @media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
  @content;
 }
}

/* iPhone 5 (portrait &; landscape) */
@mixin iphone-previous() {
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
  @content;
 }
}

/* iPhone 5 (landscape)*/
@mixin iphone-previous-landscape() {
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
  @content;
 }
}

/* iPhone 5 (portrait) */
@mixin iphone-previous-portrait() {
 @media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait) {
  @content;
 }
}

Answer 5

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