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.

    Positions of modules

    Scheduled Pinned Locked Moved Solved Troubleshooting
    12 Posts 5 Posters 8.6k Views 4 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.
    • J Offline
      jakuk
      last edited by

      Hi all, I’ve got my magic mirror all up and running, and decided I wanted it portrait, so I got that sorted, but now all my modules I.e time, weather, news feeds are all bunched up together. How do I change the position of each module is it in the main .css file? Or the css file in the specific module folder? Also can someone explain how I go about changing them to specific locations.

      Thanks

      N 1 Reply Last reply Reply Quote 0
      • N Offline
        ninjabreadman @jakuk
        last edited by

        @jakuk Start at this post. The CSS will change the style of each module (size, font, etc) but to have them appear in the appropriate regions, it’s best to use your module configurations in config.js.

        Problem with config or JavaScript? Copy/paste it into JSHint.
        Check out the detailed walkthroughs on install, config, modules, etc.

        1 Reply Last reply Reply Quote 2
        • J Offline
          jakuk
          last edited by

          Thank you for your reply. Yes I already know that to change the position of modules is in the config file, my problem is when I set my screen to portrait mode everything is in the middle of the screen now, even tho the clock config says top left? Does this need to say top_bar?

          Thank you again.

          N 1 Reply Last reply Reply Quote 0
          • N Offline
            ninjabreadman @jakuk
            last edited by

            @jakuk It needs to say top_left, although I suspect that it does.

            When you quit MM, how does the display appear – is the desktop small and in the middle, or fullscreen? It could also be an overscan issue but shouldn’t put everything “in the middle”.

            You could also try to revert to the default config.js to determine if MM layout is working correctly.

            Problem with config or JavaScript? Copy/paste it into JSHint.
            Check out the detailed walkthroughs on install, config, modules, etc.

            1 Reply Last reply Reply Quote 0
            • J Offline
              jakuk
              last edited by

              Thank you so much it was an overscan issue the resolution was set wrong for portrait mode.
              I have my resolution set to width 1100 x height 1920
              My overscan left and right set to -20 and i still have black border can’t make it fit the width size fully? Any ideas?

              Thankyou again…

              Mykle1M 1 Reply Last reply Reply Quote 0
              • Mykle1M Offline
                Mykle1 Project Sponsor Module Developer @jakuk
                last edited by

                @jakuk

                “I don’t know nothing 'bout birthin no babies!”

                Nor do I know about overscan. However, you can try something like this in your custom.css file. This gives me a mere 5 pixel border. You can adjust accordingly for your purposes.

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

                Create a working config
                How to add modules

                1 Reply Last reply Reply Quote 0
                • B Offline
                  barnosch
                  last edited by

                  why set to 1100?
                  Guess it’s a FullHD screen and should set to 1280. Otherwise it’s for sure not sharp or blurry because the aspect ratio is not correct.
                  I would give it a try and then set the overscan, if needed, correctly.

                  J 1 Reply Last reply Reply Quote 1
                  • J Offline
                    jakuk @barnosch
                    last edited by

                    @barnosch I was trying to stretch the screen but relised that wasn’t right way to do it… my resolution size is now set to width 1280 x height 1920… the bottom and top are perfect with no black bars but left and right Just won’t seem to change no matter what I change my overscan to? It says negative numbers if there is too much border but doesn’t seem to work…

                    Thanks

                    bheplerB 1 Reply Last reply Reply Quote 0
                    • bheplerB Offline
                      bhepler Module Developer @jakuk
                      last edited by

                      @jakuk Just to be sure, what’s the resolution of your monitor? Some monitors are 16:9 and some are 16:10. Be sure to set your Pi’s resolution to the native resolution of your monitor. My recommendation is to let the Raspbian OS take care of the overall resolution and use the mirror configuration to handle borders.

                      J 2 Replies Last reply Reply Quote 0
                      • J Offline
                        jakuk @bhepler
                        last edited by

                        @bhepler hi yes my monitor is 1920 x 1080 but other way around to let it be portrait, it’s also 16:9 aspect radio. It’s just strange as the top and bottom are fine, it’s just left and right I’ve about about an inch black border on each side.

                        1 Reply Last reply Reply Quote 0
                        • 1
                        • 2
                        • 1 / 2
                        • 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