How do I show something only if the device is portrait with HTML/CSS?

Question

I thought this would be a simple task, but I can't get it to work.

Essentially, I have a banner which I need to display only if the user has their device held portrait. Here is my code:

<html>

<head>
  <style>
    @media screen and (orientation: landscape) {
      #0011-rotate-device-warning {
        display: none;
      }
    }
    
    @media screen and (orientation: portrait) {
      #0011-rotate-device-warning {
        display: block;
        width: 100%;
        background-color: lightyellow;
        padding: 10px;
        border: 2px solid red;
      }
    }
  </style>
</head>

<body>


  <div id="0011-rotate-device-warning">
    <p><b>Mobile users:</b> For the best experience, please hold your device in the landscape orientation.</p>
  </div>

</body>

</html>

What I expected this to do was:

If the device is landscape, display nothing
If the device is portrait, display the "please hold your device landscape" message with a light yellow background, 10px of padding, a 2px red border and a width of 100%.

What actually happens is that regardless of orientation, the message is displayed with no styling whatsoever.

How can I adjust this so it will work correctly?

Note: This is not a duplicate of Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions That question is asking for a way to do this in JavaScript. I am wanting to use purely CSS. In addition, that question fails to satisfactorily answer the question anyway, because it makes no mention of the requirement for IDs to start with a number, which turned out to be the actual problem here

I literally just copy/pasted your question to google and found this at top result https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad — Debsmita Paul, Feb 04 '21 at 11:50
"`Note: This is not a duplicate of (...). That question is asking for a way to do this in JavaScript. I am wanting to use purely CSS.`" There are [CSS-only answers](https://stackoverflow.com/a/16232129/7575111) as well. — NullDev, Feb 04 '21 at 12:58

Jibin Mathews · Accepted Answer · 2021-02-04T12:19:23.650

You should start your id name with letter or escape it as per HTML4 spec.

<html>

<head>
  <style>
    @media screen and (orientation: landscape) {
      #rotate-device-warning {
        display: none;
      }
    }
    
    @media screen and (orientation: portrait) {
      #rotate-device-warning {
        display: block;
        width: 100%;
        background-color: lightyellow;
        padding: 10px;
        border: 2px solid red;
      }
    }
  </style>
</head>

<body>


  <div id="rotate-device-warning">
    <p><b>Mobile users:</b> For the best experience, please hold your device in the landscape orientation.</p>
  </div>

</body>

</html>

Anjs · Answer 2 · 2021-02-04T12:30:09.493

id selector will not work here because it starts with a digit. CSS identifiers cannot start with a digit So, instead try removing numeric values from starting of identifier, it will work. Below is the code :

@media (orientation: landscape) {
  #rotate-device-warning {
    display: none;
    
  }
}

@media (orientation: portrait) {
  #rotate-device-warning {
    display: block;
        width: 100%;
        background-color: lightyellow;
        padding: 10px;
        border: 2px solid red;
  }
}

html code

  <div id="rotate-device-warning" class="warning">
    <p><b>Mobile users:</b> For the best experience, please hold your device in the landscape orientation.</p>
  </div>

How do I show something only if the device is portrait with HTML/CSS?

2 Answers2