MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    Shrink border on screen with metal frame around edges

    Scheduled Pinned Locked Moved Custom CSS
    2 Posts 2 Posters 1.0k Views 1 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J Offline
      jimboh1978
      last edited by

      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?

      Thanks

      James

      brobergB 1 Reply Last reply Reply Quote 0
      • brobergB Offline
        broberg Project Sponsor @jimboh1978
        last edited by broberg

        @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.

        1 Reply Last reply Reply Quote 0
        • 1 / 1
        • First post
          Last post
        Enjoying MagicMirror? Please consider a donation!
        MagicMirror created by Michael Teeuw.
        Forum managed by Sam, technical setup by Karsten.
        This forum is using NodeBB as its core | Contributors
        Contact | Privacy Policy