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

Mirror not displaying on the entire screen

Scheduled Pinned Locked Moved Custom CSS
9 Posts 3 Posters 1.4k 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.
  • S Away
    sdetweil @jbeechey32
    last edited by Jun 5, 2021, 12:04 AM

    @jbeechey32 the default body is centered with a 60px margin

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

    If u change the margin, u have to change the sizes too

    Sam

    How to add modules

    learning how to use browser developers window for css changes

    B J 2 Replies Last reply Jun 5, 2021, 9:04 AM Reply Quote 0
    • B Offline
      BKeyport Module Developer @sdetweil
      last edited by Jun 5, 2021, 9:04 AM

      @jbeechey32 I used this to get the entire screen.

      body {
      	margin: 0px;
      	height: 100vh;
      	width: 100vw;
       }
      

      The "E" in "Javascript" stands for "Easy"

      1 Reply Last reply Reply Quote 1
      • J Offline
        jbeechey32 @sdetweil
        last edited by Jun 5, 2021, 2:26 PM

        @sdetweil

        thank you. This did work to move the overall bottom margin, but it replaced the margin back on left and right.

        I used @BKeyport advice, which did work. now all borders are to the screens edge. thank you both. Can you explain why one worked vs the other? or did I have to adjust the Calc equations?

        Thank you

        Jamal

        S B 2 Replies Last reply Jun 5, 2021, 2:46 PM Reply Quote 0
        • S Away
          sdetweil @jbeechey32
          last edited by sdetweil Jun 5, 2021, 2:47 PM Jun 5, 2021, 2:46 PM

          @jbeechey32 I was showing you what is IN the css file, I DID NOT CHANGE IT,
          I left that for YOU to do

          @BKeyport changed it for you

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • J Offline
            jbeechey32
            last edited by Jun 5, 2021, 3:01 PM

            @sdetweil oh okay. it was changed. I had 0 px margin in my first post, where as you had but the original 60 px. my misunderstanding.

            I think I understand why it changed now. Thank you both for your help.

            cheers

            S 1 Reply Last reply Jun 5, 2021, 3:14 PM Reply Quote 0
            • S Away
              sdetweil @jbeechey32
              last edited by Jun 5, 2021, 3:14 PM

              @jbeechey32 said in Mirror not displaying on the entire screen:

              oh okay. it was changed. I had 0 px margin in my first post, where as you had but the original 60 px. my misunderstanding.

              the 1st post had margin 0px;
              BUT left the width and height at 2 times the original margin… so 120px… (2 times 60)
              if u wanted full screen, then you should also adjust the width and height…

              I know this makes you read and think, that as my objective

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              J 1 Reply Last reply Jun 5, 2021, 3:16 PM Reply Quote 0
              • J Offline
                jbeechey32 @sdetweil
                last edited by Jun 5, 2021, 3:16 PM

                @sdetweil yes. I want to understand why things change under different adjustments and to not just copy and paste. The explanation of the calculation makes much more sense now. I was not understanding that at first. Thank you!

                1 Reply Last reply Reply Quote 0
                • B Offline
                  BKeyport Module Developer @jbeechey32
                  last edited by Jun 5, 2021, 9:29 PM

                  @jbeechey32 Sam tends to show you the START, I’ll show my solutions 'cuz I’m lazy, and figure other people are too. 🤣

                  The "E" in "Javascript" stands for "Easy"

                  1 Reply Last reply Reply Quote 0
                  • 1 / 1
                  1 / 1
                  • First post
                    6/9
                    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