Is there a way . . .

johnnyboy

"You, Sir, are an absolute GENIUS! Absolutely PERFECT!

Many thanks!"

+1 I just did the same, and screen estate looks a lot better now :-)
I’ve started today making a folder and every time I see a great tip like this, I screenshot it, name it as the tip, and place into folder. ;-)

Mykle1

@johnnyboy Yeah, that one’s a keeper

BKeyport

@strawberry-3-141 Just found this, bless you. Should be in the magic mirror documentation.

j.e.f.f

@strawberry-3-141 said in Is there a way . . .:

@Mykle1 put that in custom.css

body {
  margin: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
}

Might I suggest a small change… 100% can be interpreted by the browser in unexpected ways under certain circumstances. Sometimes when you specify 100% for height, the browser interprets this to mean 100% of the width. This is a safer way to do it:

body {
  margin: 20px;
  height: calc(100vh - 40px);
  width: calc(100vw - 40px);
}

vh stands for Viewport Height, similarly vw stands for Viewport Width. Viewport width and height refer to the browser window’s interior size, or in the case of an iFrame, the iFrame’s interior size – essentially the space in which the HTML DOM is visible. A value of 1vw is equal to 1% of the viewport’s width, 33vh is equal to 33% of the viewport’s height, etc.

vw and vh are especially useful when you want to scale elements relative to the available screen space.

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

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

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.