Is there a way . . .

BKeyport

dang. For some reason, that brings it even tighter to the edges than %. Weird.

I highly recommend the following for use on the official 7" touchscreen display. Gets you the maximum screen usage.

(I have a mini-display magic mirror for work.) :)

body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}

michael5r

dang. For some reason, that brings it even tighter to the edges than %. Weird.

I highly recommend the following for use on the official 7" touchscreen display. Gets you the maximum screen usage.

(I have a mini-display magic mirror for work.) :)

body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}

If your margin is 0px, there’s no need to subtract anything from the height and width - they could just be 100vh and 100vw respectively.

A Former User

:root {
  --body-margin : 20px;
}

body {
  margin: var(--body-margin);
  width: calc(100vw - var(--body-margin) * 2);
  height: calc(100vh - var(--body-margin) * 2);
}

BKeyport

@michael5r Actually, if I don’t subtract, the margins run clear off the right side and bottom of the screen, using the official 7" touchscreen, those subtractions bring it back to 100%

BKeyport

@sean Can you explain your body code a bit? I’m not quite following it.

A Former User

@bkeyport
In modern CSS, you can use variables. If you are using values referenced frequently or dependently, you can set that value as variables.
In prior example, --body-margin is defined. Now you can use it instead static fixed value 20px. So when you have to change that value, just modify --body-margin once.

BKeyport

This is the part that’s getting me…

width: calc(100vh - var(–body-margin) * 2);
height: calc(100vw - var(–body-margin) * 2);

If I’m reading this correctly - it’s taking the calculation of 100% of the viewpoint(direction) - the margin defined in the varible multiplied by 2?

100% of the viewport height minus 40 pixels in your example?

A Former User

@bkeyport
Yes. you are right.
Just one point, user-defined property should be start with -- not -

sdetweil

@bkeyport margin is both sides, or top and bottom. All the way around.

If u look at the original the width is hard coded at 100%- 2 times the margin value

BKeyport

@sdetweil so, then because I have to use the following:

body {
margin: 0px;
height: calc(100vh - 10px);
width: calc(100vw - 5px);
}

am I correct in assuming that magicmirror sees the screen a few pixels bigger than it really is - and that’s being expressed by running off the right and bottom of the screen when I don’t have the 10px subtract from height, and the 5px subtract from width?