Modify the Gap/Margins

ostfilinchen

edit your custom.css and add these Lines. The Body Part should look like this:

body {
margin: 30px;
position: absolute;
height: calc(100% - 50px);
width: calc(100% - 50px);
}

ALombardi

Thanks, @ostfilinchen! Someone reached out over chat and took care of it for me. I appreciate your assistance. Hopefully someone else can benefit from this thread though!

hefeteig

For those of us who use this in a real Magic Mirror ;) there’s no need to have any margins (top, left, right, bottom) and it is great to use all pixels of the display. If you’re with me… use the following in ~/MagicMirror/css/custom.css:

body {
    margin: 0px;
    position: absolute;
    height: 100%;
    width: 100%;
}

aaronaxvig

Replying to an old post…I know. But it shows up in search engine results.

One way to easily/cleanly make this adjustment is included in the sample custom.css. Below is an example with the relevant parts only, and adjustments to my preferences (were all 60px values before).

:root {
  --gap-body-top: 10px;
  --gap-body-right: 20px;
  --gap-body-bottom: 10px;
  --gap-body-left: 20px;
}

patrad

@aaronaxvig Thank you! All other search results that had changing the CSS body really messed up other module internal alignment. This resizes correctly and doesn’t mess with other module alignment