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.

    Move Module to corner

    Scheduled Pinned Locked Moved Development
    9 Posts 4 Posters 7.3k Views 3 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.
    • andrewchumchalA Offline
      andrewchumchal
      last edited by

      How can I move a module more to the corner so i can get ride of the blank space ? Corner Picture Will auto-remove after 30 days

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

        @andrewchumchal the body has a margin in main.css

        body {
          margin: 60px;
          position: absolute;
          height: calc(100% - 120px);
          width: calc(100% - 120px);
          ...
        }
        

        you could override that in custom.css

        Please create a github issue if you need help, so I can keep track

        1 Reply Last reply Reply Quote 0
        • KirAsh4K Offline
          KirAsh4 Moderator
          last edited by

          Note that if you are trying to move it down, you won’t be able to because the newsfeed module takes up that space. Please look at the various regions on this post: https://forum.magicmirror.builders/topic/286/regions

          A Life? Cool! Where can I download one of those from?

          andrewchumchalA 1 Reply Last reply Reply Quote 0
          • andrewchumchalA Offline
            andrewchumchal @KirAsh4
            last edited by

            @KirAsh4 @strawberry-3-141

            Thanks Guys

            1 Reply Last reply Reply Quote 0
            • P Offline
              Patrick
              last edited by

              Did it work? I tried it aswell and have the problem, that i just adjust the left-margin?
              (tried it with custom & main.css)

              Can someone help? :-)

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

                @Patrick the correct css property is called margin-left not left-margin, maybe this was your mistake.

                you can post your css here so we can have a look on it

                Please create a github issue if you need help, so I can keep track

                P 1 Reply Last reply Reply Quote 0
                • P Offline
                  Patrick @strawberry 3.141
                  last edited by

                  @strawberry-3.141 sorry for my wrong explanation.
                  I just want to reduce the whole margin because my display is to small for weather + clock.
                  So i tried to reduce it with the tags:

                  • margin: xxx

                  • margin-left: xxx in combination with margin-right: xxx
                    both didn’t work.
                    I had the problem that everything just moved to the left instead of providing more space.
                    So i had at the right a huge blank space which wasn’t my plan… (Check the attached picture)
                    Thank you for your help!
                    0_1476032707196_Problem.png

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

                    @Patrick I would try this

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

                    Please create a github issue if you need help, so I can keep track

                    P 1 Reply Last reply Reply Quote 0
                    • P Offline
                      Patrick @strawberry 3.141
                      last edited by

                      @strawberry-3.141 Thank you! Now it works very well!
                      Don’t know why i didn’t thought about height & width before :D

                      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