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.

    Modules size

    Scheduled Pinned Locked Moved Troubleshooting
    10 Posts 5 Posters 16.5k Views 4 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.
    • strawberry 3.141S Offline
      strawberry 3.141 Project Sponsor Module Developer
      last edited by

      To close up this topic the solution he needed was

      .MMM-swisstransport {
          width: 400px;
      }
      

      Please create a github issue if you need help, so I can keep track

      lucallmonL 1 Reply Last reply Reply Quote 1
      • lucallmonL Offline
        lucallmon @strawberry 3.141
        last edited by

        @strawberry-3.141 said in Modules size:

        To close up this topic the solution he needed was

        .MMM-swisstransport {
            width: 400px;
        }
        

        Where was this found? The answer still wasn’t clear. I’d like to shrink the size of my calendar.

        strawberry 3.141S 1 Reply Last reply Reply Quote 0
        • strawberry 3.141S Offline
          strawberry 3.141 Project Sponsor Module Developer @lucallmon
          last edited by

          @lucallmon every module is inside a div container with the module name as class. in your case the selector would be .calendar { /* do the magic*/}

          Please create a github issue if you need help, so I can keep track

          1 Reply Last reply Reply Quote 0
          • lucallmonL Offline
            lucallmon
            last edited by

            I found where it needed to go. Every time I change a module, it starts small on load, then every other module on the same side just resizes it. So, I resize all the modules and it just goes back to the same size… too big. Thoughts?

            cowboysdudeC 1 Reply Last reply Reply Quote 0
            • cowboysdudeC Offline
              cowboysdude Module Developer @lucallmon
              last edited by cowboysdude

              @lucallmon said in Modules size:

              I found where it needed to go. Every time I change a module, it starts small on load, then every other module on the same side just resizes it. So, I resize all the modules and it just goes back to the same size… too big. Thoughts?

              It needs to go in your custom.css file… When I do it I have no problems :)

              0_1486218038870_width.png

              I have the .clock in my custom.css file a width of 100 and this is the result and no other module is effected or no other module overrides my setting.

              Are you sure you’re entering this in your custom.css file? If you are trying to edit the module itself when there’s an update you’ll lose all the changes you made… if you use your custom.css file you won’t :)

              Of course I’ll be taking that back out because it’s ugly LOL but I’m using my dev on my computer to show you.

              lucallmonL 1 Reply Last reply Reply Quote 0
              • lucallmonL Offline
                lucallmon @cowboysdude
                last edited by

                @cowboysdude could you post a copy of your custom.css file so I can see what you are talking about? Right now, my ‘body’ in the file is blank.

                1 Reply Last reply Reply Quote 0
                • cowboysdudeC Offline
                  cowboysdude Module Developer
                  last edited by

                  The bottom is the entire custom.css file that matches the pic I posted… I used .clock because that is the module name…

                  if I were going to use the other module shown it would be…

                  .MMM-NFLweather  {
                      width: 100px;
                  }
                  
                  /*****************************************************
                   * Magic Mirror                                      *
                   * Custom CSS                                        *
                   *                                                   *
                   * By Michael Teeuw http://michaelteeuw.nl           *
                   * MIT Licensed.                                     *
                   *                                                   *
                   * Add any custom CSS below.                         *
                   * Changes to this files will be ignored by GIT. *
                   *****************************************************/
                  
                   body {
                   	cursor: help
                   }
                  .clock {
                      width: 100px;
                  }
                  
                  
                  lucallmonL 1 Reply Last reply Reply Quote 0
                  • lucallmonL Offline
                    lucallmon @cowboysdude
                    last edited by yawns

                    @cowboysdude thanks for the help. This is actually what worked for me:

                     body {
                    	cursor: help
                     }
                     
                     .region.top.left {
                    	width: 375px
                    }
                    
                    1 Reply Last reply Reply Quote 2
                    • 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