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.

    how to make just 1 module bigger?

    Scheduled Pinned Locked Moved General Discussion
    6 Posts 3 Posters 1.3k 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.
    • A Offline
      aarish
      last edited by aarish

      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?

      lavolp3L 1 Reply Last reply Reply Quote 0
      • lavolp3L Offline
        lavolp3 Module Developer @aarish
        last edited by lavolp3

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

        How to troubleshoot modules
        MMM-soccer v2, MMM-AVStock

        A 1 Reply Last reply Reply Quote 0
        • A Offline
          aarish @lavolp3
          last edited by

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

          1 Reply Last reply Reply Quote 0
          • A Offline
            aarish
            last edited by

            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?

            1 Reply Last reply Reply Quote 0
            • P Offline
              pakal41
              last edited by

              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;

              1 Reply Last reply Reply Quote 0
              • A Offline
                aarish
                last edited by

                This is amazing, thank you so much!

                1 Reply Last reply Reply Quote 0
                • 1 / 1
                • First post
                  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