The screen doesn't have the right size

ostfilinchen

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

vicdilou

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

chrisfoerg

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

vicdilou

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

yawns

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

chrisfoerg

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

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

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 ;)

vicdilou

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