MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    1. Home
    2. jbeechey32
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.
    J
    Offline
    • Profile
    • Following 0
    • Followers 0
    • Topics 1
    • Posts 4
    • Groups 0

    jbeechey32

    @jbeechey32

    0
    Reputation
    1
    Profile views
    4
    Posts
    0
    Followers
    0
    Following
    Joined
    Last Online

    jbeechey32 Unfollow Follow

    Latest posts made by jbeechey32

    • RE: Mirror not displaying on the entire screen

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

      posted in Custom CSS
      J
      jbeechey32
    • RE: Mirror not displaying on the entire screen

      @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

      posted in Custom CSS
      J
      jbeechey32
    • RE: Mirror not displaying on the entire screen

      @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

      posted in Custom CSS
      J
      jbeechey32
    • Mirror not displaying on the entire screen

      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
      }
      
      posted in Custom CSS
      J
      jbeechey32