Orientation Lock on Landscape CSS

Question

I have a list of html that I want to lock on mobile viewport basically min-width: 320px and max-width: 767px.

I used this code here:

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) {
    .piano-container {
        max-width: 72vw;
        transform: rotate(-90deg);
        transform-origin: left top;
        overflow-x: hidden;
        position: absolute;
        top: 100%;
        left: 0;
    }
  }

However this did not lock up the view and doesnt look good on mobile.

Here's a js-fiddle: https://jsfiddle.net/b3mqehan/

I'm not sure if something like you want to achieve here is possible - based on [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Managing_screen_orientation) I think if you don't have orientation available/set in your device / browser, then you can't "force" it via CSS. EDIT: I've found out that it is though achievable through other methods - explained [in this SO thread](https://stackoverflow.com/a/14360699/1004946) — lukaszkups, Aug 21 '20 at 14:49

score 1 · Answer 1 · answered Aug 21 '20 at 14:50

On landscape and portrait orientations the min-width and max-width are differents. Have you tried to remove min and max width?

    @media (orientation: landscape) {
       .piano-container {
          max-width: 72vw;
          transform: rotate(-90deg);
          transform-origin: left top;
          overflow-x: hidden;
          position: absolute;
          top: 100%;
          left: 0;
       }
    }

Orientation Lock on Landscape CSS

1 Answers1