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.

    The screen doesn't have the right size

    Scheduled Pinned Locked Moved Solved Troubleshooting
    15 Posts 5 Posters 9.3k Views 5 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.
    • V Offline
      vicdilou @chrisfoerg
      last edited by

      @chrisfoerg The screen is shifted only with MagicMirror, before the update I didn’t have problème. I’m 100%sure the problem does not come from the screen.

      C 1 Reply Last reply Reply Quote 0
      • C Offline
        chrisfoerg @vicdilou
        last edited by

        @vicdilou to find the problem can you change the background color? black on black is difficult to see where the body tags ends

        V 1 Reply Last reply Reply Quote 1
        • V Offline
          vicdilou @chrisfoerg
          last edited by

          @chrisfoerg How can I do this ? I’ll try in the evening.

          C 1 Reply Last reply Reply Quote 0
          • yawnsY Offline
            yawns Moderator
            last edited by

            Please check the content of ~/MagicMirror/css/main.css

            The body part should look like this:

            body {
              margin: 60px;
              position: absolute;
              height: calc(100% - 120px);
              width: calc(100% - 120px);
              background: #000;
              color: #aaa;
              font-family: "Roboto Condensed", sans-serif;
              font-weight: 400;
              font-size: 2em;
              line-height: 1.5em;
              -webkit-font-smoothing: antialiased;
            }
            

            To change background-color change background: #000; to background: #FF0000; and refresh your mirror

            1 Reply Last reply Reply Quote 0
            • C Offline
              chrisfoerg @vicdilou
              last edited by

              @vicdilou in the file custom.css in the folder ~/MagicMirror/css

              body {
              margin: 0px;
              height: 100%;
              width: 100%;
              background-color: red;
              }

              1 Reply Last reply Reply Quote 0
              • schlachtkreuzer6S Offline
                schlachtkreuzer6
                last edited by schlachtkreuzer6

                go to: ~/MagicMirror/css/main.css and change the content of main.css to this:

                /*****************************************************
                 * Magic Mirror                                      *
                 * Custom CSS                                        *
                 *                                                   *
                 * By Michael Teeuw http://michaelteeuw.nl           *
                 * MIT Licensed.                                     *
                 *                                                   *
                 * Add any custom CSS below.                         *
                 * Changes to this files will be ignored by GIT. *
                 *****************************************************/
                
                body {
                  margin: 20px;
                  position: absolute;
                  height: calc(100% - 40px);
                  width: calc(100% - 40px);
                  background: #000;
                  color: #aaa;
                  font-family: "Roboto Condensed", sans-serif;
                  font-weight: 400;
                  font-size: 2em;
                  line-height: 1.5em;
                  -webkit-font-smoothing: antialiased;
                }
                
                .region.fullscreen {
                  position: absolute;
                  top: -20px;
                  left: -20px;
                  right: -20px;
                  bottom: -20px;
                }
                
                

                just change margin px, hight and width px and be careful to set the same margin px at fullscreen ;)

                V 1 Reply Last reply Reply Quote 0
                • V Offline
                  vicdilou @schlachtkreuzer6
                  last edited by

                  Thank all of you !
                  I change height and width px because he don’t like 5px margin.

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