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


NOTE: This method does not work on most of the Samsung "The Frame" TVs. This is because models older than 2021 do not support Portrait modes and will not accept this CSS. Models 35 inches or larger that were manufactured post-2021 do have Portrait mode, but we have not confirmed if this CSS will work on them.


Select your desired screen from the Screens menu:


Click the Styles button in the screen editor and click Add Custom CSS Rules:



Insert the corresponding rule for its labeled rotation.


Right:

/*Rotate right */
#screen-container-no-edit{
    margin:0;
    transform-origin:bottom left;
    transform: rotate(90deg);
    position:absolute;
    top: -100vw;
    left: 0;
    height:100vw;
    width:100vh;
    overflow:visible;
}


Left:

/*Rotate left */
#screen-container-no-edit{
    margin:0;
    transform-origin: bottom right;
    transform: rotate(-90deg);
    position: absolute;
    top: -100vw;
    right: 0;
    height: 100vw;
    width: 100vh;
    overflow: visible;
}



Click Save at the bottom and click Refresh Displays Icon at the top right or refresh the browser on the display device:


Having Trouble?

- Create a Support Ticket