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

The screen doesn't have the right size

Scheduled Pinned Locked Moved Solved Troubleshooting
15 Posts 5 Posters 8.8k 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 Jan 23, 2017, 1:38 PM

    @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 Jan 23, 2017, 1:41 PM Reply Quote 0
    • C Offline
      chrisfoerg @vicdilou
      last edited by Jan 23, 2017, 1:41 PM

      @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 Jan 23, 2017, 1:42 PM Reply Quote 1
      • V Offline
        vicdilou @chrisfoerg
        last edited by Jan 23, 2017, 1:42 PM

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

        C 1 Reply Last reply Jan 23, 2017, 1:45 PM Reply Quote 0
        • Y Offline
          yawns Moderator
          last edited by Jan 23, 2017, 1:44 PM

          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 Jan 23, 2017, 1:45 PM

            @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
            • S Offline
              schlachtkreuzer6
              last edited by schlachtkreuzer6 Jan 23, 2017, 9:03 PM Jan 23, 2017, 9:03 PM

              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 Jan 24, 2017, 12:21 AM Reply Quote 0
              • V Offline
                vicdilou @schlachtkreuzer6
                last edited by Jan 24, 2017, 12:21 AM

                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
                2 / 2
                • First post
                  13/15
                  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