• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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.
  • L Offline
    lavolp3 Module Developer @aarish
    last edited by lavolp3 Jun 23, 2020, 10:15 AM Jun 23, 2020, 10:14 AM

    @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 Jun 24, 2020, 12:55 AM Reply Quote 0
    • A Offline
      aarish @lavolp3
      last edited by Jun 24, 2020, 12:55 AM

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

      1 Reply Last reply Reply Quote 0
      • A Offline
        aarish
        last edited by Jan 3, 2021, 5:11 AM

        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 Jan 3, 2021, 6:55 AM

          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 Jan 3, 2021, 5:24 PM

            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