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.

    Mirror not displaying on the entire screen

    Scheduled Pinned Locked Moved Custom CSS
    9 Posts 3 Posters 1.4k Views 3 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.
    • J Offline
      jbeechey32
      last edited by

      Hi,

      I am a bit of a noob. I have been working on this mirror for a few days. I had it almost perfect but then decided to buy a new tv for better functionality vs. 10 year old screen.

      Anyway, the pi fills the entire screen, but when MagicMirror loads the bottom of the mirror doesnt not fill in the screen and all the other sides do. I read through different forums and have changed different parameters, but nothing seems to work. https://ibb.co/bJwQ3wL

      I thought the issue was the bottom bar, so I ended up changing the colors of the body and bottom bar to see what was happening and found that it was the body that was not extending down. The white section is the bottom of the available monitor.

      html {
        cursor: none;
        overflow: hidden;
        background: #000;
        user-select: none;
      }
      
      ::-webkit-scrollbar {
        display: none;
      }
      
      body {
        margin: 0px;
        position: absolute;
        height: calc(100%-120px);
        width: calc(100%-120px);
        background: #173;
        color: #aaa;
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;
        font-size: 2em;
        line-height: 1.5em;
        -webkit-font-smoothing: antialiased;
      }
      
      /**
       * Default styles.
       */
      
      .dimmed {
        color: #666;
      }
      
      .normal {
        color: #999;
      }
      
      .bright {
        color: #fff;
      }
      
      .xsmall {
        font-size: 15px;
        line-height: 20px;
      }
      
      .small {
        font-size: 20px;
        line-height: 25px;
      }
      
      .medium {
        font-size: 30px;
        line-height: 35px;
      }
      
      .large {
        font-size: 65px;
        line-height: 65px;
      }
      
      .xlarge {
        font-size: 75px;
        line-height: 75px;
        letter-spacing: -3px;
      }
      
      .thin {
        font-family: Roboto, sans-serif;
        font-weight: 100;
      }
      
      .light {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 300;
      }
      
      .regular {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 400;
      }
      
      .bold {
        font-family: "Roboto Condensed", sans-serif;
        font-weight: 700;
      }
      
      .align-right {
        text-align: right;
      }
      
      .align-left {
        text-align: left;
      }
      
      header {
        text-transform: uppercase;
        font-size: 15px;
        font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
        font-weight: 400;
        border-bottom: 1px solid #666;
        line-height: 15px;
        padding-bottom: 5px;
        margin-bottom: 10px;
        color: #999;
      }
      
      sup {
        font-size: 50%;
        line-height: 50%;
      }
      
      /**
       * Module styles.
       */
      
      .module {
        margin-bottom: 0px;
      }
      
      .region.bottom .module {
        margin-top: 0px;
        margin-bottom: 0px;
      }
      
      .no-wrap {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .pre-line {
        white-space: pre-line;
      }
      
      /**
       * Region Definitions.
       */
      
      .region {
        position: absolute;
      }
      
      .region.fullscreen {
        position: absolute;
        top: 100px;
        left: 150px;
        right: 150px;
        bottom: 100px;
        pointer-events: none;
      }
      
      .region.fullscreen * {
        pointer-events: auto;
      }
      
      .region.right {
        right: 0;
        text-align: right;
      }
      
      .region.top {
        top: 0;
      }
      
      .region.top .container {
        margin-bottom: 25px;
      }
      
      .region.bottom .container {
        margin-top: 25px;
      }
      
      .region.top .container:empty {
        margin-bottom: 0;
      }
      
      .region.top.center,
      .region.bottom.center {
        left: 50%;
        transform: translateX(-50%);
      }
      
      .region.top.right,
      .region.top.left,
      .region.top.center {
        top: 100%;
      }
      
      .region.bottom {
        bottom: 0;
      }
      
      .region.bottom .container:empty {
        margin-top: 0;
      }
      
      .region.bottom.right,
      .region.bottom.center,
      .region.bottom.left {
        bottom: 100%;
      }
      
      .region.bar {
        width: 100%;
        text-align: center;
      }
      
      .region.third,
      .region.middle.center {
        width: 100%;
        text-align: center;
        transform: translateY(-50%);
      }
      
      .region.upper.third {
        top: 33%;
      }
      
      .region.middle.center {
        top: 50%;
      }
      
      .region.lower.third {
        top: 66%;
      }
      
      .region.left {
        text-align: left;
      }
      
      .region table {
        width: 100%;
        border-spacing: 0;
        border-collapse: separate;
      }
      #GPHOTO_INFO {
      	display:none;
      }
      
      .clock {
        position: absolute;
        left : -50px;
        top : 0px;
      }
      
      .calendar {
        margin-top: 10px;
        margin-bottom: 0px;
        margin-left: 5px;
        margin-right: 0px;
      }
      .MMM-NowPlayingOnSpotify {
        position: absolute;
        left : 5px;
        top:300px;
        bottom : 0px;
      }
      
      .MMM-AlexaControl {
        position: absolute;
        bottom: 0px;
        margin-bottom: 0px;
        margin-top: 50px;
      }
      
      .region.bottom.bar {
      background-color: red;
      position: absolute;
      width: 100%;
      margin-bottom: 0 px
      }
      
      S 1 Reply Last reply Reply Quote 0
      • S Away
        sdetweil @jbeechey32
        last edited by

        @jbeechey32 the default body is centered with a 60px margin

        body {
          margin: 60px;
          position: absolute;
          height: calc(100% - 120px);
          width: calc(100% - 120px);
        

        If u change the margin, u have to change the sizes too

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        BKeyportB J 2 Replies Last reply Reply Quote 0
        • BKeyportB Offline
          BKeyport Module Developer @sdetweil
          last edited by

          @jbeechey32 I used this to get the entire screen.

          body {
          	margin: 0px;
          	height: 100vh;
          	width: 100vw;
           }
          

          The "E" in "Javascript" stands for "Easy"

          1 Reply Last reply Reply Quote 1
          • J Offline
            jbeechey32 @sdetweil
            last edited by

            @sdetweil

            thank you. This did work to move the overall bottom margin, but it replaced the margin back on left and right.

            I used @BKeyport advice, which did work. now all borders are to the screens edge. thank you both. Can you explain why one worked vs the other? or did I have to adjust the Calc equations?

            Thank you

            Jamal

            S BKeyportB 2 Replies Last reply Reply Quote 0
            • S Away
              sdetweil @jbeechey32
              last edited by sdetweil

              @jbeechey32 I was showing you what is IN the css file, I DID NOT CHANGE IT,
              I left that for YOU to do

              @BKeyport changed it for you

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              1 Reply Last reply Reply Quote 0
              • J Offline
                jbeechey32
                last edited by

                @sdetweil oh okay. it was changed. I had 0 px margin in my first post, where as you had but the original 60 px. my misunderstanding.

                I think I understand why it changed now. Thank you both for your help.

                cheers

                S 1 Reply Last reply Reply Quote 0
                • S Away
                  sdetweil @jbeechey32
                  last edited by

                  @jbeechey32 said in Mirror not displaying on the entire screen:

                  oh okay. it was changed. I had 0 px margin in my first post, where as you had but the original 60 px. my misunderstanding.

                  the 1st post had margin 0px;
                  BUT left the width and height at 2 times the original margin… so 120px… (2 times 60)
                  if u wanted full screen, then you should also adjust the width and height…

                  I know this makes you read and think, that as my objective

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  J 1 Reply Last reply Reply Quote 0
                  • J Offline
                    jbeechey32 @sdetweil
                    last edited by

                    @sdetweil yes. I want to understand why things change under different adjustments and to not just copy and paste. The explanation of the calculation makes much more sense now. I was not understanding that at first. Thank you!

                    1 Reply Last reply Reply Quote 0
                    • BKeyportB Offline
                      BKeyport Module Developer @jbeechey32
                      last edited by

                      @jbeechey32 Sam tends to show you the START, I’ll show my solutions 'cuz I’m lazy, and figure other people are too. 🤣

                      The "E" in "Javascript" stands for "Easy"

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