• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.

Border/Not fullscreen

Scheduled Pinned Locked Moved Solved Troubleshooting
5 Posts 3 Posters 3.3k Views 2 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.
  • T Offline
    trevortreachery
    last edited by Jul 18, 2018, 2:33 AM

    I was having a problem with there being a border all around my smart mirror when MagicMirror opened (OS runs full screen, pi is set to monitors native resolution and overscan is off). I found another thread suggesting adding this to custom.css

    body {
      margin: 20px; /* This will give you a 20px border.   */
      height: calc(100% - 40px);
      width: calc(100% - 40px);
    }
    

    What I have in the file now is this, but it got rid of the top and left border but the bottom and right became 2x as thick as they were to begin with

    body {
    margin: 0; 
     height: 100% (100% - 40px);
     width: calc (100% - 40px);
     	
     }
    

    Thoughts/suggestions?

    Thank you

    M B 2 Replies Last reply Jul 18, 2018, 2:59 AM Reply Quote 0
    • M Offline
      Mykle1 Project Sponsor Module Developer @trevortreachery
      last edited by Jul 18, 2018, 2:59 AM

      @trevortreachery

      How about a 1 pixel border?

      body {
         margin: 1px;
         height: calc(100% - 2px);
         width: calc(100% - 2px);
       }
      

      Create a working config
      How to add modules

      1 Reply Last reply Reply Quote 0
      • B Offline
        broberg Project Sponsor @trevortreachery
        last edited by Jul 18, 2018, 4:54 AM

        @trevortreachery

        As above or no border at all

         body {
        margin: 0; 
         height: 100%;
         width: 100%;
          	
          }
        

        You only add the ( ) part when using calc

        T 1 Reply Last reply Jul 22, 2018, 2:45 AM Reply Quote 0
        • T Offline
          trevortreachery
          last edited by Jul 22, 2018, 2:42 AM

          @Mykle1 @broberg

          I had to add a small border because I had to tape the bezel of my monitor and got a small overlap on to the screen. What I have now is

          body {
          margin: 3px; 
           height: 100% (100% - 40px);
           width: 100% (100% - 40px);
           	
           }
          

          This makes a nice flush to the edge border on left and top, but I still have a very thick border on the right and bottom. I’ve noticed that if I push the width of my iFrame module passed 100, it gets it closer to the edge, but all the modules are obviously scaling off the custom .css. So for example, the compliments module that I have positioned lower center, is now technically ‘center’ from listening to the css but offset left from the iFrame module that’s been pushed out passed the right border.

          1 Reply Last reply Reply Quote 0
          • T Offline
            trevortreachery @broberg
            last edited by Jul 22, 2018, 2:45 AM

            @broberg

            Hey, I’m an idiot. I took out the parenthesis and fixed it. I’m not a coder by any means, which is why I need people like you. I realize now the meaning of the (), took it out and fixed it. Thank you.

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            1 / 1
            • First post
              5/5
              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