• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
MagicMirror Forum
  • Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
A New Chapter for MagicMirror: The Community Takes the Lead
Read the statement by Michael Teeuw here.

Modify the Gap/Margins

Scheduled Pinned Locked Moved Development
6 Posts 5 Posters 9.2k Views 5 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • O Offline
    ostfilinchen
    last edited by Nov 22, 2016, 7:05 PM

    Hi @ALombardi ,

    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);
    }

    1 Reply Last reply Reply Quote 1
    • A Offline
      ALombardi
      last edited by ALombardi Nov 22, 2016, 7:39 PM Nov 22, 2016, 7:38 PM

      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!

      1 Reply Last reply Reply Quote 0
      • H Offline
        hefeteig
        last edited by hefeteig Apr 21, 2019, 9:14 PM Apr 21, 2019, 9:13 PM

        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%;
        }
        
        1 Reply Last reply Reply Quote 1
        • A Offline
          aaronaxvig
          last edited by Jan 8, 2024, 2:36 PM

          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;
          }
          
          P 1 Reply Last reply Jan 30, 2025, 3:26 AM Reply Quote 1
          • P Offline
            patrad @aaronaxvig
            last edited by Jan 30, 2025, 3:26 AM

            @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

            1 Reply Last reply Reply Quote 0
            • 1 / 1
            • First post
              Last post
            Enjoying MagicMirror? Please consider a donation!
            MagicMirror created by Michael Teeuw.
            Forum managed by Sam, technical setup by Karsten.
            This forum is using NodeBB as its core | Contributors
            Contact | Privacy Policy