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

Layout and positioning on a tiny screen.



  • Im using a tiny screen and am having issues with positioning and scaling. I just want to use two modules, clock and calendar (and maybe play around in the future with others). Adding config parameters to the module in /MagicMirror/config/config.js :

    {
       module: "clock",
       position: "top_left",
          config: {
             displaySeconds: "false"
                     }
    },
    

    does not appear to change anything but it does allow me to comment out modules I don’t want to use. In /MagicMirror/modules/default/clock/clock.js I can enable/disable the analog clock and change some format parameters (clockBold: true, for example). I added the following to /MagicMirror/css/custom.css but it had no effect at all:

    .clock{
           left : 100 px,
           top:50 px
             }
    

    MagicMirror/css/main.css has settings for a bunch of stuff and allowed me to adjust the margin so its right against the edge of the screen:

    body {
      margin: -2px;
      ...
    

    but nothing else regarding positioning for specific modules. I think im close but I havent been able to find anything specific to this problem as most people are happy with positioning/scaling based on the “top-left, bottom-right” regions. Any advice on how to approach this would be greatly appreciated.


  • Project Sponsor

    First off, Don’t alter anything in the main.css itself (this will fuck shit up when you are trying to update your mirror later)

    Everything you add in custom.css will overwrite anything already in the main.css file (so if

    body {
      margin: 20px;
      ...
    

    exists in main.css then

    body {
      margin: -2px;
      ...
    

    in custom.css will overwrite that line in main.css)

    If you want to free float any placement your modules should have this code

    
    .clock{
    position: absolute;
    left : 100px
    top : 50px
    }
    

    This will force the position of the module to be calculated from the top left corner of the screen.

    This will drop the margin completely :

    body {
      position: absolute;
      margin: 0px;
      height: 100%;
      width: 100%;
    }
    

    There is many ways to change the sizes, either by font-size or zoom (which would scale everything by 😵

    If the config parameters doesn’t change anything you probably have a typo somewhere that negates your changes and instead goes with the defaults specified in the module.