Posts made by jbeechey32

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

@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

@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

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
}