Mirror not displaying on the entire screen

jbeechey32

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
}

sdetweil

@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

BKeyport

@jbeechey32 I used this to get the entire screen.

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

jbeechey32

@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

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

jbeechey32

@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

@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

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!

BKeyport

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