DAKboard Support

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. Custom CSS is only available for use with Paid Subscriptions and only works on Custom Screens.

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:

On a Custom Screen, click the Styles button in the screen editor and click Add Custom CSS Rules:

Or on your Predefined Screen, you can find the Custom CSS rules under the Settings & Defaults tab:

NOTE: This may not be needed with the Predefined Screen as it can auto-rotate with some devices. Some Smart TVs can no longer use the Predefined Screen as well. You will need to test this to know if your TV has these limitations. Use our article Use DAKboard on a Smart TV to know if your TV will support these Screens

Once you have selected your screen and opened the Custom CSS rule section, 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;
}

#screen-container-no-edit {
    margin: 0;
    transform-origin: center;
    transform: rotate(180deg);
    overflow: visible;
    width: 100vw;
    height: 100vh;
}