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.

    Need help with resizing regions

    Scheduled Pinned Locked Moved Custom CSS
    8 Posts 7 Posters 2.1k Views 7 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.
    • T Offline
      techlady
      last edited by

      Hi everyone,
      I have my magic mirror running on a PI 4. It is starting to look like I want, but I need help resizing everything so that it fits on my tv. The tv is 42 in. As you will see in the picture, I have the default weather module, weekly view of Cal Ext2 , and a different module in the top right region. In the top left region are the clock, NFL, and a Movie titles module. In that top bar are the newsfeed and compliments module. The bottom bar has the month view of Cal Ext 2. Any suggestions would be greatly appreciated.

      0476BD34-251B-4E5C-BAFE-CD784266CEC2.jpeg

      S mumblebajM M M ankonaskiff17A 5 Replies Last reply Reply Quote 0
      • S Offline
        sdetweil @techlady
        last edited by

        @techlady too much stuff. the regions grow longer as more stuff is added.

        u can make the font smaller, but makes it harder to read

        others have gone to pages, and rotate thru to manage all the info

        Sam

        How to add modules

        learning how to use browser developers window for css changes

        1 Reply Last reply Reply Quote 0
        • mumblebajM Offline
          mumblebaj Module Developer @techlady
          last edited by

          @techlady As Sam mentioned, MMM-Pages is good to use. I use this and split my modules over different pages and I use the MMM-page-indicator with it. Works best for me.

          Check out my modules at: https://github.com/mumblebaj?tab=repositories

          1 Reply Last reply Reply Quote 0
          • M Offline
            MMRIZE @techlady
            last edited by

            @techlady
            Unfortunately, MMM-CalendarExt2 doesn’t respect MM’s default show/hide mechanism, so you need some tweek to achieve your goal with some paging modules.
            I’m regretting that I made that way, I thought it was a nice idea at that time. Anyway CalExt2 is going to its life ends due to dying dependencies. So at this moment I have no plan to improve. (Maybe new module instead?)

            mumblebajM 1 Reply Last reply Reply Quote 0
            • M Offline
              MacG @techlady
              last edited by

              @techlady First of all I would adjust the borders at the custom.css

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

              The 40 pixels are examples.

              1 Reply Last reply Reply Quote 0
              • mumblebajM Offline
                mumblebaj Module Developer @MMRIZE
                last edited by

                @mmrize I think the “fixed” feature should work for that?

                Check out my modules at: https://github.com/mumblebaj?tab=repositories

                BKeyportB 1 Reply Last reply Reply Quote 0
                • BKeyportB Offline
                  BKeyport Module Developer @mumblebaj
                  last edited by BKeyport

                  Here’s a tip. The sizing is all within the main.css file.

                  do not adjust main.css

                  add your changes to custom.css in the same directory.

                  As an example, here’s how I adjusted mine on my mirror. It provides a thin left side, wide middle, and other minor changes without too much of a hassle.

                  The top blank area in my mirror is for an external ran instance of OMX for my security camera. The bottom blanks is currently unused because of how my mirror is set up.

                  /* Global changes */
                  /* Use the entire screen */
                  
                  html { 
                  	cursor: none;
                  }
                  
                  body {
                  	margin: 0px;
                  	height: 100vh;
                  	width: 100vw;
                   }
                  
                  /* Adjust all modules */ 
                   
                   .module {
                          padding: 2px;
                          margin-bottom: 0px;
                   }
                  
                  /* disable dimmed text */
                  
                  .dimmed {
                  	color: #FFFFFF
                  }
                  
                  
                  /* Region mods */
                  
                  .region.left {
                  	text-align:center;
                  	} 
                  
                  .region.right {
                  	right: 0%;
                  }
                  
                  .region.top.center {
                    left: 52%;
                    transform: translateX(-50%);
                  }
                  
                  .region.fullscreen {
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    right: 0px;
                    bottom: 0px;
                    pointer-events: none;
                   }
                   
                  .region.fullscreen * {
                  	background: rgba(0,0,0,0.7);
                  }
                  

                  Capture.PNG

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

                  1 Reply Last reply Reply Quote 0
                  • ankonaskiff17A Offline
                    ankonaskiff17 @techlady
                    last edited by

                    @techlady Here is my project in progress. My intent is to mount Pi to back of TV and treat MM as another HDMI input.
                    As others have said, module writers that stick with the convention of using main.css to format their module make it real easy to format multiple modules by using the appropriate block of main.css and dropping it in custom.css.
                    Gets sticky when a module author does their own formatting top to bottom.
                    20210928_200307.jpg

                    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