MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Mirror not displaying on the entire screen

    Custom CSS
    3
    9
    542
    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
      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
        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

        Create a working config
        How to add modules

        BKeyport J 2 Replies Last reply Reply Quote 0
        • BKeyport
          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
            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 BKeyport 2 Replies Last reply Reply Quote 0
            • S
              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

              Create a working config
              How to add modules

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

                  Create a working config
                  How to add modules

                  J 1 Reply Last reply Reply Quote 0
                  • J
                    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
                    • BKeyport
                      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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                      This forum is using NodeBB as its core | Contributors
                      Contact | Privacy Policy