[Solved] MagicMirror ignoring zoom and font-size css

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

@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

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

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

dikkedimi

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

yawns

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

@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