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

how to make just 1 module bigger?



  • hey, I was using the default weather module and I changed it to only pull up 6 things from my calendar. I was able to successfully fo that but now I want the calendar module to be a lot bigger but keep the size of everything else the same. how would I be able to do that?


  • Module Developer

    @aarish you can reference every module as a css element using its name as class.
    in this case it is .calendar

    in custom.css

    .calendar {
      width: 500px;
      height: xxxpx;
    }
    

    But note that all other modules are automatically set with width: 100% so will adept their width…



  • @lavolp3 Thank you so much, this helps a lot!



  • Hello, I am using Bugsonet’s MMM-Weather module and wanted to make the data bigger. I wrote the same thing as above in custom.css besides changing .calendar to .MMM-Weather. I noticed that when I changed the width it made the module move left and right. I also noticed that changing the Height value did not effect anything. Any idea how to make it bigger?



  • hello, I made it like this

    /*

    • MMM-Weather custom
      */

    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .time,
    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .day-name {
    font-size: 22px !important;
    }

    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .temperature,
    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .temperature-container {
    font-size: 26px !important;
    }

    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .precipitation-container,
    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .wind-container {
    font-size: 22px !important;
    }

    .MMM-Weather .wrapper.table .forecast-container {
    font-size: 22px !important;
    }

    .MMM-Weather .wrapper.table .forecast-container .forecast-item > span,
    .MMM-Weather .wrapper.table .forecast-container .header-row > span {
    font-size: 22px !important;
    }

    .MMM-Weather .wrapper.table .forecast-container .header-row > span {
    font-size: 17px !important;
    }

    .MMM-Weather .wrapper.table .forecast-container .header-row .temperature-header {
    font-size: 22px !important;
    }

    .MMM-Weather .current-conditions-wrapper .icon {
    width: 180px;
    height: 180px;
    }
    .MMM-Weather .inline-icon,
    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .inline-icon {
    width:45px;
    height: 45px;

    }
    .MMM-Weather .extra-current-conditions-wrapper .feels-sun-container .inline-icon {
    width: 26px;
    height: 26px;
    }
    .MMM-Weather .wrapper.tiled .forecast-container .forecast-item .forecast-icon {
    width: 80px;
    height: 80px;
    }
    .MMM-Weather .wrapper.table .forecast-container .forecast-item .forecast-icon {
    width: 50px;
    height: 50px;



  • This is amazing, thank you so much!


Log in to reply