Smart Tvs and other certain devices and configurations have screen rotation limitations.  This article will explain the procedure you can follow to rotate a screen with CSS rules to workaround this device limitation.





Select your desired screen from the 'Screens' menu.



Navigate to the 'Settings and Defaults' tab, and click 'Add Custom CSS Rules'.



Insert the corresponding rule for its labeled rotation.


Left:

/*Rotate left */
body{
    margin:0;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    position: absolute;
    top: -100vw;
    right: 0;
    height: 100vw;
    width: 100vh;
    overflow: auto;
}


Right:

/*Rotate right */
body {
    margin:0;
    transform: rotate(90deg);
    transform-origin:bottom left;
    position:absolute;
    top: -100vw;
    left: 0;
    height:100vw;
    width:100vh;
    overflow:auto;
}


Click "Save Changes' at the bottom and click 'Refresh Displays' at the top right or refresh the browser on the display device.



Having Trouble?