MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    [Solved] MagicMirror ignoring zoom and font-size css

    Troubleshooting
    3
    7
    3709
    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.
    • D
      dikkedimi last edited by dikkedimi

      Hi Fellow MagicMirror users!

      I’ve reinstalled magicmirror on a blank rPi, because my main one was too busy to fulfil all it’s tasks. It was so overloaded my clock would stop for 3 minutes or longer. Running Openhab + magicmirror + mqtt + alexa is just too much I guess…

      On the new pi, I started with a raspbian stretch lite image. I added the desktop GUI using

      sudo apt-get -y install raspberrypi-ui-mods
      

      then i installed MM using the script from github. Followed the autostart and config raspi guides. Works like a charm!

      Then i scp’d over a copy of my old config file. I also reinstalled the modules I was using with git clone (so i did not copy over any of the modules from my old config)

      Everything works, and the clock now shows the correct time every second. Which was my goal.

      However, all the UI elements are way too big.

      • I’ve tried adjusting the zoom in the config.js file, but this had no effect.
      • I’ve tried adding custom CSS to the custom.css file as well, but this too had no effect. i tried it with the body {} tag in place (inserting the CSS in between), and I also tried it without the body{} tag. Both yielded the same result (none).
      • I’ve also set my resolution to the monitor’s native res, in the /boot/config.txt

      I’ve tried everything I can think of, so now I’m hoping you can help me out. pm2 log does not give any errors.

      my config.js (privacy sensitive information has been obscured):

      var config = {
              port: 8666,
            ipWhitelist: ['127.0.0.1', '::ffff:127.0.0.1', '::1', '::ffff:192.168.1.120', '::ffff:192.168.178.1/120',],
              zoom: 0.8,
              language: 'en',
              timeFormat: 24,
              units: 'metric',
      
              modules: [
                              {
                              module: 'alert',
                              },
                              {
                              module: 'updatenotification',
                              position: 'top_bar'
                              },
                              {
                              module: 'clock',
                              position: 'top_left',
                              config: {
                                      displayType: 'both',
                                      analogFace: 'simple',
                                      analogPlacement: 'left'
                                      },
                              },
                              {
                              module: 'currentweather',
                              header: 'Current Weather',
                              position: 'top_right',
                              config: {
                                      location: 'SomeTown',
                                      locationID: '453783214',  //ID from http://www.openweathermap.org
                                      appid: '0bscur3d',
                                      updateInterval: '6000'
                                      },
                              },
                              {
                              module: 'weatherforecast',
                              position: 'top_right',
                              header: 'Weather Forecast',
                              config: {
                                      location: 'SomeTown',
                                      locationID: '453783214',  //ID from http://www.openweathermap.org
                                      appid: '0bscur3d'
                                      },
                              },
                              {
                              module: 'MMM-cryptocurrency',
                              position: 'bottom_right',
                              config: {
                                      currency: ['ethereum', 'bitcoin', 'litecoin'],
                                      conversion: 'EUR',
                                      headers: ['change24h', 'change1h', 'change7d'],
                                      displayType: 'logoWithChanges',
                                      showGraphs: true,
                                      },
                              }
      
              ]
      };
      
      /*************** DO NOT EDIT THE LINE BELOW ***************/
      if (typeof module !== 'undefined') {module.exports = config;}
      
      Mykle1 1 Reply Last reply Reply Quote 0
      • Mykle1
        Mykle1 Project Sponsor Module Developer @dikkedimi last edited by Mykle1

        @dikkedimi said in MagicMirror ignoring zoom and font-size css:

        I’ve tried everything I can think of

        Have you tried these key commands while MM is running and displayed on screen?

        Simultaneously pressing:

        Control and - (that’s a dash/minus key) For Zoom out

        Control and Shift and = For Zoom in

        Control and 0 (that’s a zero) For default size

        Create a working config
        How to add modules

        D 1 Reply Last reply Reply Quote 1
        • D
          dikkedimi @Mykle1 last edited by dikkedimi

          @Mykle1 said in MagicMirror ignoring zoom and font-size css:

          @dikkedimi said in MagicMirror ignoring zoom and font-size css:

          I’ve tried everything I can think of

          Have you tried these key commands while MM is running and displayed on screen?

          Simultaneously pressing:

          Control and - (that’s a dash/minus key) For Zoom out

          Control and Shift and = For Zoom in

          Control and 0 (that’s a zero) For default size

          Thank you so much! Did indeed not think of that, as I assumed (never having used the browser on this machine), the default was set to 0 zoom.

          This seems to have fixed the problem, hitting ctrl+0 gave the desired element sizes. It even persists through reboot.

          Can you clarify why this fixed it?

          Mykle1 1 Reply Last reply Reply Quote 1
          • Mykle1
            Mykle1 Project Sponsor Module Developer @dikkedimi last edited by

            @dikkedimi

            You’re welcome. You may have inadvertently hit the key command that zooms the display and as you see it persists through reboot, but who can say?

            All these key commands can be found in Menu bar while MM is running by pressing your Alt key.

            Create a working config
            How to add modules

            D 1 Reply Last reply Reply Quote 1
            • D
              dikkedimi @Mykle1 last edited by

              @Mykle1 said in [Solved] MagicMirror ignoring zoom and font-size css:

              @dikkedimi

              You’re welcome. You may have inadvertently hit the key command that zooms the display and as you see it persists through reboot, but who can say?

              All these key commands can be found in Menu bar while MM is running by pressing your Alt key.

              Useful info, hope it helps others as well!

              1 Reply Last reply Reply Quote 0
              • yawns
                yawns Moderator last edited by

                Today I picked up my raspberry again, played around with the installation including zoom in config.js. Then I saw there were 332 changes, so I ran a git pull & npm install and afterwards everything was totally tiny. Removing zoom from the config.js file did not help. Then I remembered I saw something related some days ago on this forum. Thank you mykle.

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

                  @yawns said in [Solved] MagicMirror ignoring zoom and font-size css:

                  Thank you mykle.

                  Fantastic! You’re welcome. 🙂

                  I put this together the other day for easy referral.

                  https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners

                  Create a working config
                  How to add modules

                  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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                  This forum is using NodeBB as its core | Contributors
                  Contact | Privacy Policy