Is there a way . . .

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?

sdetweil

@bkeyport I also had a heck of a time modifying body to get a fullscreen image.
I finally changed to use the .fullscreen.above css setting. I was also worried that if I required body to be changed and some else’s module also required body changed, then the conflict would mess up my display.

michael5r

@bkeyport said in Is there a way . . .:

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

No - the screen is the size it is.

Your CSS above doesn’t make sense (you’re setting a body height that’s 10px smaller than the window height). If you set the body height to be 100vh and you get a vertical scrollbar, it’s because of another margin that’s pushing the body element.

In general, it’s good practice to also do:

html {
    margin: 0;
    padding: 0;
}

to avoid situations like this.