MagicMirror² v2.5.0 is available! For more information about this release, check out this topic.

How to do bigger or smaller the modules



  • I’m new in this community, and I came here from a video that make a smart mirror with magic mirror v2 and in the video he can adjust the size of the modules, with “ctrl” + “+” or “ctrl” + “shift” + “-”, he can, but I can’t do it, and I want some help for this, to do the modules bigger or smaller.


  • Module Developer

    @ge98eleven

    While MM is running:

    Bigger = Ctrl and Shift and =

    Smaller = Ctrl and -



  • you can use zoom in your custom .css file…

    to zoom out, and make the modules smaller, use a number below 100%. IE: 75%

    My mirror (unfinished) at 100%…

    0_1527022593457_Screenshot (1).png

    with the following code in custom.css…

    /*****************************************************
     * Magic Mirror                                      *
     * Custom CSS                                        *
     *                                                   *
     * By Michael Teeuw http://michaelteeuw.nl           *
     * MIT Licensed.                                     *
     *                                                   *
     * Add any custom CSS below.                         *
     * Changes to this files will be ignored by GIT. *
     *****************************************************/
    
     body {
       zoom: 75%;
     }
    

    it looks like this…

    0_1527022690825_Screenshot (6).png

    to zoom in (make them bigger, use a percentage over 100%, IE: 125%…

    my Mirror at 125%…

    0_1527022819751_Screenshot (7).png

    using the following code in the custom.css…

    /*****************************************************
     * Magic Mirror                                      *
     * Custom CSS                                        *
     *                                                   *
     * By Michael Teeuw http://michaelteeuw.nl           *
     * MIT Licensed.                                     *
     *                                                   *
     * Add any custom CSS below.                         *
     * Changes to this files will be ignored by GIT. *
     *****************************************************/
    
     body {
       zoom: 125%;
     }