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
<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](https://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad)
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