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.

    Messed up CSS between Portrait and Landscape monitors

    Scheduled Pinned Locked Moved Troubleshooting
    24 Posts 3 Posters 11.0k 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.
    • N Offline
      ninjabreadman @Damian
      last edited by

      @Damian I was hoping you wouldn’t have to resort to it, but you can use CSS transform: scale():

      body {
      transform: scale(0.8); /* for 80% */
      }
      

      Some CSS transforms are processor intensive, although without animation should be fine on an RPi.

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

      D 1 Reply Last reply Reply Quote 1
      • D Offline
        Damian @ninjabreadman
        last edited by

        @ninjabreadman

        Thanks, but this is on a PC not a Pi … I have posted another post incase it gets lost in here, to find out if there is a setting to make to keep my MM Zommed out x 6, but I will try your suggestion here and see if that helps, as being a PC it should handle it eh?

        Mykle1M N 2 Replies Last reply Reply Quote 0
        • Mykle1M Offline
          Mykle1 Project Sponsor Module Developer @Damian
          last edited by

          @Damian

          While MM is running, press these keys at the same time:

          Default Display Size = Control and 0 (That’s a zero)

          Zoom In = Control and Shift and = (That’s an equals sign)

          Zoom Out = Control and - (That’s a dash/minus sign)

          Create a working config
          How to add modules

          D 1 Reply Last reply Reply Quote 1
          • N Offline
            ninjabreadman @Damian
            last edited by ninjabreadman

            @Damian Do you want 6x or 60%? (The former seems very small). Sorry I misunderstood about your PC; most of us use PCs as dev machines for the RPi.

            If 6x (or, inverted, 1/6 or 16.7%):

            body {
            transform: scale(0.167); /* this might get messy, at least with any raster assets (like images) */
            }
            

            Or 60%:

            body {
            transform: scale(0.6);
            }
            

            According to this very interesting StackExchange question, you can also set the document’s zoom property in JavaScript (and via CSS, too):

            document.body.style.zoom = 2;
            

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

            D 2 Replies Last reply Reply Quote 1
            • D Offline
              Damian @ninjabreadman
              last edited by

              @ninjabreadman

              Sorry, what I meant by x 6 was pressing the Zoom Out six times to get everything fitting the way I like it on screen. I’m home in a few hours so will play about with your suggestions and see how they fare.

              1 Reply Last reply Reply Quote 0
              • D Offline
                Damian @Mykle1
                last edited by

                @Mykle1

                Thanks for that Mykle, will save numerous clicks to get top menu then Zoom Out.

                Glad I have at least found a workable solution, and had another read of your Read Me on your MMM.Lucy to get familiar when setting up everything. I managed to get exactly the same Mic as yours, and also seen the PS3 Eye one going cheap, so thought “Why not?” I’m sure I will go for the weaker version of MMM.Lucy for my Pi MM, so will use the PS3 Eye for that 😉

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

                  @Damian said in Messed up CSS between Portrait and Landscape monitors:

                  I’m sure I will go for the weaker version of MMM.Lucy for my Pi MM

                  Suggestion: Don’t even try to use the animated.gif of the face on your Pi. That will surely bring it to a screeching halt. Use a simple picture file, or none.

                  Create a working config
                  How to add modules

                  1 Reply Last reply Reply Quote 1
                  • D Offline
                    Damian @ninjabreadman
                    last edited by

                    @ninjabreadman
                    @Mykle1

                    Ok, just completed tests on both suggestions.

                    @ninjabreadman, the results are that all that did was retain the original squashed look, but shrunk the page inwards, leaving a black border all round. Exactly the same, but a much smaller version, like having a 22" screen on a 55" tv.

                    @Mykle1, your keyboard shortcuts worked a treat, but when reloading, everything reverted again 😣

                    What I’m gonna do is wipe MM, seeing as I may have messed up something along the ways by trying all sorts, then download MM and put my chosen modules on, virgin style, then update everything, then see if any of your suggestions work better on a fresh MM, and add back in my personal changes 1 x 1.

                    If the zooming is still a problem, then I could live with just using the keyboard shortcuts on it, as it will be only once per day. This is only a temp measure using the kitchen TV mini itx PC, as I will be just finalising on a monitor set at portrait, for my PC operated MM, and using the full MMM.Lucy on that.

                    Many thanks again guys for all your input here, it may not have solved it, but your help has educated me more on MM, so for that alone, the journey has not been wasted.

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

                      @Damian said in Messed up CSS between Portrait and Landscape monitors:

                      your keyboard shortcuts worked a treat, but when reloading, everything reverted again

                      Then I suspect that you’ve changed something along the way that is overriding that. Your idea of a fresh install is not a bad idea, seeing as you don’t even remember the changes that you’ve made.

                      Another suggestion: Don’t trash your current installation. Simply rename the MagicMirror folder to something else. Do your new installation. Transfer your modules (1 by 1) into the new MagicMirror folder

                      Create a working config
                      How to add modules

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