Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord
    MagicMirror² v2.15.0 is available! For more information about this release, check out this topic.

    Is there a way . . .

    Troubleshooting
    8
    23
    3924
    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.
    • Mykle1
      Mykle1 Project Sponsor Module Developer last edited by

      . . . to change the margins for the entire screen? If, for instance, I wanted to make the margins around the entire screen 20 pixels so that the modules would all move to the margins, how would I do that? I think it’s in one of the css files, but which one? And what code would I be looking for to edit?

      And, if you are feeling very generous, how would align these two modules? Notice how the Calendar module is a bit further left than the NetworkScanner module below it?
      0_1486913832939_IMG_1731edit.jpg

      Many thanks to all those that have already given me assistance. I’ve been trying to repay your kindness by helping others that are newer than me and are asking the questions that I asked just a few weeks ago

      strawberry 3.141 1 Reply Last reply Reply Quote 0
      • strawberry 3.141
        strawberry 3.141 Project Sponsor Module Developer @Mykle1 last edited by strawberry 3.141

        @Mykle1 put that in custom.css

        body {
          margin: 20px;
          height: calc(100% - 40px);
          width: calc(100% - 40px);
        }
        
        Mykle1 BKeyport J 3 Replies Last reply Reply Quote 4
        • Mykle1
          Mykle1 Project Sponsor Module Developer @strawberry 3.141 last edited by

          @strawberry-3.141 said in Is there a way . . .:

          put that in custom.css

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

          Many thanks!

          1 Reply Last reply Reply Quote 0
          • johnnyboy
            johnnyboy last edited by

            "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 1 Reply Last reply Reply Quote 1
            • Mykle1
              Mykle1 Project Sponsor Module Developer @johnnyboy last edited by

              @johnnyboy Yeah, that one’s a keeper

              1 Reply Last reply Reply Quote 1
              • BKeyport
                BKeyport Module Developer @strawberry 3.141 last edited by

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

                1 Reply Last reply Reply Quote 0
                • J
                  j.e.f.f Project Sponsor Module Developer @strawberry 3.141 last edited by

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

                  1 Reply Last reply Reply Quote 2
                  • BKeyport
                    BKeyport Module Developer last edited by 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 1 Reply Last reply Reply Quote 0
                    • michael5r
                      michael5r Module Developer @BKeyport last edited by

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

                      BKeyport 1 Reply Last reply Reply Quote 0
                      • Sean
                        Sean Module Developer last edited by Sean

                        :root {
                          --body-margin : 20px;
                        }
                        
                        body {
                          margin: var(--body-margin);
                          width: calc(100vw - var(--body-margin) * 2);
                          height: calc(100vh - var(--body-margin) * 2);
                        }
                        
                        BKeyport 1 Reply Last reply Reply Quote 1
                        • 1
                        • 2
                        • 3
                        • 1 / 3
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy