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.9k 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.
    • ? Offline
      A Former User
      last edited by

      Hello fellow MagicMirrorMakers,

      now with this sensational new and old but better modules, i need to free some space on my mirror to use it in it´s original way: a mirror ;-)

      i really like the look of the mirror and the module´s size, but i´m not really familiar with CSS and i´m not able to resize the calendar-module (and the time-module).

      Is there an easy (or an easy to explain)-way to adjust the size of those 2 modules? Since i cannot test, i´m not sure if i want to adjust the width and hights or just some colums. Or resize the whole module based on the size (like 90% of the original size or smething like that).

      Maybe someone can explain me some way of resizing this or have done something similar and can help me with his/her experience.

      Thank you in advance!
      w2kbug

      1 Reply Last reply Reply Quote 0
      • MichMichM Offline
        MichMich Admin
        last edited by

        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 Reply Quote 1
        • L Offline
          l8kerjuan @MichMich
          last edited by

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

          tosti007T 1 Reply Last reply Reply Quote 0
          • L Offline
            l8kerjuan
            last edited by

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

            1 Reply Last reply Reply Quote 0
            • tosti007T Offline
              tosti007 Module Developer @l8kerjuan
              last edited by tosti007

              @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 Reply Quote 0
              • L Offline
                l8kerjuan @tosti007
                last edited by

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

                tosti007T 1 Reply Last reply Reply Quote 0
                • tosti007T Offline
                  tosti007 Module Developer @l8kerjuan
                  last edited by tosti007

                  @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 Reply Quote 2
                  • L Offline
                    l8kerjuan @tosti007
                    last edited by

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

                    tosti007T brobergB 2 Replies Last reply Reply Quote 1
                    • tosti007T Offline
                      tosti007 Module Developer @l8kerjuan
                      last edited by

                      @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
                      • brobergB Offline
                        broberg Project Sponsor @l8kerjuan
                        last edited by

                        @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 Reply Quote 1
                        • 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