• 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.

Adjust modules size to match each other (weather/calendar)

Scheduled Pinned Locked Moved Development
11 Posts 5 Posters 16.6k 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.
  • M Offline
    MichMich Admin
    last edited by May 12, 2016, 10:37 AM

    If you just put the following items in your css/custom.css you can change the font sizes of the mirror by adjusting the values.

    .xsmall {
      font-size: 15px;
      line-height: 20px;
    }
    
    .small {
      font-size: 20px;
      line-height: 25px;
    }
    
    .medium {
      font-size: 30px;
      line-height: 35px;
    }
    
    .large {
      font-size: 65px;
      line-height: 65px;
    }
    
    .xlarge {
      font-size: 75px;
      line-height: 75px;
      letter-spacing: -3px;
    }
    
    L 1 Reply Last reply Jan 25, 2017, 4:20 PM Reply Quote 1
    • L Offline
      l8kerjuan @MichMich
      last edited by Jan 25, 2017, 4:20 PM

      @MichMich i tried this with no changes. what could i be doing wrong?

      T 1 Reply Last reply Jan 25, 2017, 4:28 PM Reply Quote 0
      • L Offline
        l8kerjuan
        last edited by Jan 25, 2017, 4:25 PM

        @w2kbug did the changes suggested work for you? its not changing anything here on my end.

        1 Reply Last reply Reply Quote 0
        • T Offline
          tosti007 Module Developer @l8kerjuan
          last edited by tosti007 Jan 25, 2017, 4:28 PM Jan 25, 2017, 4:28 PM

          @l8kerjuan did you change the values of font-size? I didn’t check, but I assume those are the default values

          If there is anything don't hesitate to contact me!
          ProfileSwitcher, TouchNotifications

          L 1 Reply Last reply Jan 25, 2017, 4:30 PM Reply Quote 0
          • L Offline
            l8kerjuan @tosti007
            last edited by Jan 25, 2017, 4:30 PM

            @tosti007 which font size do i change? all the same. what does the xsmall-xlarge effect?

            T 1 Reply Last reply Jan 25, 2017, 6:11 PM Reply Quote 0
            • T Offline
              tosti007 Module Developer @l8kerjuan
              last edited by tosti007 Jan 25, 2017, 6:12 PM Jan 25, 2017, 6:11 PM

              @l8kerjuan xsmall means extra small, xlarge means extra large. No not all the same then different font sizes won’t have any effect. Instead you should either add or subtract a certain amount from all of them

              If there is anything don't hesitate to contact me!
              ProfileSwitcher, TouchNotifications

              L 1 Reply Last reply Jan 25, 2017, 6:15 PM Reply Quote 2
              • L Offline
                l8kerjuan @tosti007
                last edited by Jan 25, 2017, 6:15 PM

                @tosti007 thanks… played with it and figured it out… no rhyme or reason that i could figure out or tried to figure out… got it working though… thanks!!!

                T B 2 Replies Last reply Jan 25, 2017, 6:22 PM Reply Quote 1
                • T Offline
                  tosti007 Module Developer @l8kerjuan
                  last edited by Jan 25, 2017, 6:22 PM

                  @l8kerjuan good to hear, you’re welcome!

                  If there is anything don't hesitate to contact me!
                  ProfileSwitcher, TouchNotifications

                  1 Reply Last reply Reply Quote 0
                  • B Offline
                    broberg Project Sponsor @l8kerjuan
                    last edited by Jan 25, 2017, 7:10 PM

                    @l8kerjuan It’s up to the the person who made the module, the xsmall, small etc are all classes that can be assigned to different divs in the module,

                    checking the .js file for each module you can see what part of the module the classes are used on.
                    As for the calendar, the normal class is used on the events.

                    L 1 Reply Last reply Jan 25, 2017, 7:17 PM Reply Quote 1
                    • L Offline
                      l8kerjuan @broberg
                      last edited by Jan 25, 2017, 7:17 PM

                      @broberg got it. thank you!

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