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

[Solved] MagicMirror ignoring zoom and font-size css

Scheduled Pinned Locked Moved Troubleshooting
7 Posts 3 Posters 4.2k 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.
  • D Offline
    dikkedimi
    last edited by dikkedimi Dec 2, 2017, 3:34 PM Dec 2, 2017, 2:50 PM

    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;}
    
    M 1 Reply Last reply Dec 2, 2017, 3:20 PM Reply Quote 0
    • M Offline
      Mykle1 Project Sponsor Module Developer @dikkedimi
      last edited by Mykle1 Dec 2, 2017, 3:21 PM Dec 2, 2017, 3:20 PM

      @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 Dec 2, 2017, 3:25 PM Reply Quote 1
      • D Offline
        dikkedimi @Mykle1
        last edited by dikkedimi Dec 2, 2017, 3:26 PM Dec 2, 2017, 3:25 PM

        @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?

        M 1 Reply Last reply Dec 2, 2017, 3:32 PM Reply Quote 1
        • M Offline
          Mykle1 Project Sponsor Module Developer @dikkedimi
          last edited by Dec 2, 2017, 3:32 PM

          @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 Dec 2, 2017, 3:35 PM Reply Quote 1
          • D Offline
            dikkedimi @Mykle1
            last edited by Dec 2, 2017, 3:35 PM

            @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
            • yawnsY Offline
              yawns Moderator
              last edited by Dec 8, 2017, 1:58 PM

              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.

              M 1 Reply Last reply Dec 8, 2017, 5:41 PM Reply Quote 0
              • M Offline
                Mykle1 Project Sponsor Module Developer @yawns
                last edited by Dec 8, 2017, 5:41 PM

                @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
                1 / 1
                • First post
                  1/7
                  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