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

Need help resizing in vertical orientation

Scheduled Pinned Locked Moved Troubleshooting
36 Posts 3 Posters 8.1k 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.
  • M Offline
    Matthewlawson3
    last edited by Mar 24, 2021, 12:03 AM

    Hi, I have been working on my magic mirror and everything is working great! Today I flipped the orientation of the mirror to vertical. Most of the modules that I have work great in the vertical orientation, however, a few, like MMM Tools and the Bible Gateway module that shows a Bible verse stretches out too far toward the center and covers up another module.

    The MMM Tools is set for top left, but it does not appear flush top left, it is closer to the clock module that is top center. How can I move MMM Tools more to the left? Or how can I make modules in general more flushed to the edge of the screen?

    The Bible Gateway module is set for bottom right and runs into the default news module set for bottom center position.

    I am new to the Magic Mirror so any help would be appreciated !

    S B 2 Replies Last reply Mar 24, 2021, 12:48 AM Reply Quote 0
    • S Offline
      sdetweil @Matthewlawson3
      last edited by Mar 24, 2021, 12:48 AM

      @matthewlawson3 see how to use developers window
      https://forum.magicmirror.builders/topic/14782/make-a-remove-header-space-or-overlap-two-modules/2

      Sam

      How to add modules

      learning how to use browser developers window for css changes

      M 1 Reply Last reply Mar 24, 2021, 1:52 AM Reply Quote 0
      • M Offline
        Matthewlawson3 @sdetweil
        last edited by Mar 24, 2021, 1:52 AM

        @sdetweil okay I’ve read through some of what you posted. So I’m trying to get to the developer window to remove or modify certain regions on screen?

        S 1 Reply Last reply Mar 24, 2021, 2:20 AM Reply Quote 0
        • S Offline
          sdetweil @Matthewlawson3
          last edited by sdetweil Mar 24, 2021, 2:22 AM Mar 24, 2021, 2:20 AM

          @matthewlawson3 to find them, understand what is where.

          and y can copy main.css to custom css and give every region a different background color

          Sam

          How to add modules

          learning how to use browser developers window for css changes

          1 Reply Last reply Reply Quote 0
          • B Offline
            BKeyport Module Developer @Matthewlawson3
            last edited by Mar 24, 2021, 7:09 AM

            If you wanna use the entire screen - in custom.css add:

            /* Use the entire screen */
            
            body {
            	margin: 0px;
            	height: 100vh;
            	width: 100vw;
             }
            

            Don’t copy main.css into custom and start there - it’s a bad idea - just fiddle with the tags you wanna adjust. The mirror loads main.css, then every module’s CSS file, then custom.css and css will add your rules to the tag.

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

            S 1 Reply Last reply Mar 24, 2021, 11:32 AM Reply Quote 0
            • S Offline
              sdetweil @BKeyport
              last edited by Mar 24, 2021, 11:32 AM

              @bkeyport make sure if u change body like that, to fix the fullscreen definition which does a negative value to reverse the margin value coded in body.

              also, copying main was because we recommend NOT changing values there

              Sam

              How to add modules

              learning how to use browser developers window for css changes

              M 2 Replies Last reply Mar 24, 2021, 12:25 PM Reply Quote 0
              • M Offline
                Matthewlawson3 @sdetweil
                last edited by Mar 24, 2021, 12:25 PM

                @sdetweil okay. I’ve never modified anything CSS. Sounds like I am modifying code like that that is used for a webpage. A few questions…

                Where is the main.css and custom.css located?

                You are saying make a copy of the original main.css and I then modify the original main.css? I assume if something goes wrong that I can then copy back in place the copy of the original main.css to get everything back to normal.

                What do I use custom.css for?

                Thanks and forgive my ignorance on this!

                S 3 Replies Last reply Mar 24, 2021, 12:28 PM Reply Quote 0
                • S Offline
                  sdetweil @Matthewlawson3
                  last edited by Mar 24, 2021, 12:28 PM

                  @matthewlawson3 the css files are in the MagicMirror/css folder

                  MagicMirror is indeed a webpage, called a Single Page Application

                  because CSS supports overriding (replacing) styles previously defined
                  the order of processsing is

                  main.css
                  any module provided classes/styles, thru the getStyles() method
                  custom.css

                  this way custom.css can change anything defined before

                  Sam

                  How to add modules

                  learning how to use browser developers window for css changes

                  1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @Matthewlawson3
                    last edited by Mar 24, 2021, 12:29 PM

                    @matthewlawson3 I was suggesting NEVER to modify main.css

                    so, if u follow that rule, you need custom.css to contain what is in main.css for testing

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    1 Reply Last reply Reply Quote 1
                    • S Offline
                      sdetweil @Matthewlawson3
                      last edited by Mar 24, 2021, 12:33 PM

                      @matthewlawson3 see this topic
                      https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works?_=1616334901530

                      Sam

                      How to add modules

                      learning how to use browser developers window for css changes

                      M 1 Reply Last reply Mar 24, 2021, 7:36 PM Reply Quote 0
                      • 1
                      • 2
                      • 3
                      • 4
                      • 1 / 4
                      1 / 4
                      • First post
                        9/36
                        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