CODEWITHSUNDEEP
htmlcssmedia-queries
Freddy
Freddy

Reputation: 867

Orientation: Landscape showing true for desktop

Wondering why landscape specific styles are showing true when on desktop?

I have styles specified under @media (min-width: 1024px) and (orientation:landscape). These were specifically for iPad landscape. However, these styes are still applied when on desktop?

Upvotes: 1

Views: 869

Answers (1)

xmaster
xmaster

Reputation: 1050

Well it's very simple. Because landscape means if the width of the viewport is bigger then the height of the viewport. And most screens are made like this. So yes your media query is applied on the desktop. The opposite of landscape is portrait. It's a portrait when the the height is greater than or equal to the width. Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/orientation

Example:

body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}
@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>

Upvotes: 2

Related Questions