The screen doesn't have the right size



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


  • Moderator

    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



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

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



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



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