Problem with width and height in the landscape orientation

[AnnaxT]

I’m trying to set media queries for:

• max-width: 414px
• max-width: 414px and (orientation: landscape)

The problem I’ve encountered is that it looks like Google Dev Tool is assuming that after rotation the width of the device is now its original height and the height is width, so the second media query doesn’t work in landscape mode. It only works when I set the width of the landscape orientation to the minimum value of the height in portrait orientation.

I am a bit confused as I’ve done a few project and never encountered this scenario. Is this how it works or did I miss something?

This is my sass file:

.container {

  width: 300px;
  height: 450px;
  padding: 30px;
  display: grid;
  grid-template-rows: 3fr 7fr;
  font-size: 1.75rem;
  background-color: $dark-grey;

  @media (max-width: 414px) {
    width: 100%;
    height: 80%;
    padding: 35px 25px;
  }

  @media (max-width:414px) and (orientation: landscape) {
    height: calc(100vh - 40px);
    padding: 20px;
    overflow: scroll;
  }
}

Thank you!

[tlc35us]

At https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation
“Note: This feature does not correspond to device orientation.”
The doc says that orientation is for testing the orientation. What you said about the dev tool is correct and you would use the height as the new width for landscape.