MagicMirror² v2.14.0 is available! For more information about this release, check out this topic.

Shrink border on screen with metal frame around edges

  • Evening all,

    I have just flush mounted my project to the wall using U profile aluminium on 2 sides to hold it and the other 2 sides just attached to the screen, which cuts off the edges around my stripped screen. How do I adjust the CSS to shrink each border so the viewable content starts at the edge of the aluminium and not the edge of the screen itself?



  • Project Sponsor

    @jimboh1978 this has been asked multiple times in the forum (maybe we should add this at the top in the css forum).

    But anyways, you adjust the body margin and width/height
    (This will be added in the custom.css file, and not altered in the main.css)

    This will add a 100pixel border around the entire screen

    body {
      margin: 100px;
      height: calc(100% - 200px);
      width: calc(100% - 200px);

    This will add a 100pixel border on the sides and 50pixel border on top and bottom

    body {
      margin-right: 100px;
      margin-left: 100px;
      margin-top: 50px;
      margin-bottom: 50px;
      height: calc(100% - 100px);
      width: calc(100% - 200px);

    Notice that you always have to subtract the totalt border width (left+right) and/or height (top+bottom) to get to display properly.

Log in to reply