TABLE OF CONTENTS


Smart TVs and other non-DAKOS 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.



Adding Custom CSS to your Screens:


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



The Custom CSS Rules:


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;
}

If you need to flip the landscape upside down, you can use the CSS below:


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


Click Save at the bottom of the Styles dropdown or Save Changes at the bottom of the Settings & Defaults tab, then click the Refresh Displays button at the top right corner of the Screen Editor as seen below: 



Alternatively, you can refresh the browser on the Smart TV as well to apply the changes.



Frequently Asked Questions:


Below are the most Frequently Asked Questions about Display orientations:



Why didn't my Orientation Change?


If the orientation change did not take effect, it is possible that your Device's Browser does not support Custom CSS or needs to be upgraded so it can use this CSS. Try upgrading your Device's browser and its OS. If this does not resolve the issue, you may not be able to use this on your Display.




Why won't the Orientation Change on my Samsung The Frame TV?


Samsung's The Frame TV has a built-in accelerometer designed to prevent it from having its orientation changed by external sources like the DAKOS. Models of The Frame TV older than 2021 could not be made to hang in Portrait mode and will not be able to be forced into this mode. Models 2021 and newer and 32" and larger can be hung in Portrait mode, but settings in the TV need to be adjusted for this to work.


Consult your owner's manual and confirm that your The Frame TV can be changed to this orientation before connecting a DAKOS device. If it can, change the settings on the TV first, then adjust the DAKOS device and your Screen accordingly. 



Why is the Screen Upside down on my Display?


If, after you change the orientation of your Display, the screen is showing upside down, this may be due to the direction your monitor is facing. Try switching the CSS you used.



Helpful Articles:


Having trouble?  See if these articles help.


How to use DAKboard on a Smart TV

How to use a non-DAKOS Device as a Display