• 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 9.2k 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.
  • O Offline
    ostfilinchen
    last edited by Jan 23, 2017, 1:26 PM

    after update my MM, the custom.css was clear. all my changes go away. to my luck, i had an backup :-)

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