Device orientation with media queries

Question

i want some features to apply to a page when for example the minimum width of the screen is 1025px and when a mobile device is rotated horizontally. i'm tryng with this media queries, am i doing wrong?

@media (min-width: 1025px) or (orientation: landscape) {...}

Instead of `or` use a comma `,`, and the rules will be applied if one of them is true. If both needs to be true, use `and` — Asons, May 03 '19 at 17:14
so the comma work as the logic or operator? i want to apply the rules if one of the 2 condistion is true, so it should be a logic OR — Syertim, May 03 '19 at 17:44

score -2 · Answer 1 · answered May 03 '19 at 17:36

I try with orientation and have a look to following code snippet

MAIN PROBLEM IN YOUR CODE IS:

screen is missed

@media only screen and (max-width: 600px) or (orientation: portrait)

For your code, changes required are

@media screen (min-width: 1025px) or (orientation: landscape) {...}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
  background-color: lightgreen;
}

@media only screen and (max-width: 600px) and (orientation: portrait){
  body {
    background-color: lightblue;
  }
}
</style>
</head>
<body>

<p>Resize the browser window. When the width of this document is 600 pixels or less and orientation is portrait, the background-color is "lightblue", otherwise it is "lightgreen".</p>

</body>
</html>

Support community, yes, but when someone post answers that is wrong, badly formatted, not following SO guide lines, etc., they get downvoted. And yours is wrong, as it has nothing to do with `screen` missing, and `or` doesn't work yet (just been drafted) and `and` force both rules to be true, which is not what OP want. — Asons, May 04 '19 at 09:21

Device orientation with media queries

1 Answers1