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

Screen Font is too big

Scheduled Pinned Locked Moved Troubleshooting
17 Posts 4 Posters 15.1k Views 6 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.
  • Y Offline
    yo-less Module Developer @strawberry 3.141
    last edited by yo-less Aug 29, 2016, 6:32 PM Aug 29, 2016, 6:31 PM

    I’m assuming you changed the font-size attribute somewhere else than in the body section of the main css file. Using the body section, you’re hypothetically telling it to change it everywhere, but most of the time you’re changing nothing at all, that is because most modules don’t use the general font size as far as I can tell (someone correct me if I’m wrong here).

    The modules I’m using specifically tell the mirror to print their information in “small”, “medium”, “large”, … letters. This is what those section in the css file are for.

    So, let’s say you don’t like that the “small” letters have a font size of 20px and you want them to be half as big, then you add the following lines to your custom.css:

    .small {
    	font-size: 10px;
    }
    

    I suggest you try to find out in which section you changed the font-size in the main.css file. Add that section to the custom.css file and change your font size there. Otherwise all your font changes will be lost the next time you update your mirror.

    M 1 Reply Last reply Aug 31, 2016, 5:47 AM Reply Quote 0
    • M Offline
      Menn80 @yo-less
      last edited by Aug 31, 2016, 5:47 AM

      @yo-less
      Alright, so if the default says 70% and I have told it to go to 100% in the body of the custom.css file I did exactly what I did not want, I went bigger. That I can understand. Should I change the custom.css file from saying
      body {
      .small {
      font-size: 10px;
      }
      }

      to

      {
      .small {
      font-size: 10px;
      }
      }

      also if my modules are using % should I use % instead of px or any other of the .css variants? My thought on the theory is it shouldn’t matter but sometimes my theory is so very wrong.

      Thank you for explaining things to me, I am very new to this coding concept. I should have paid more attention to how this all works when I was younger!

      Andy

      S 1 Reply Last reply Aug 31, 2016, 5:55 AM Reply Quote 0
      • S Offline
        strawberry 3.141 Project Sponsor Module Developer @Menn80
        last edited by strawberry 3.141 Aug 31, 2016, 5:57 AM Aug 31, 2016, 5:55 AM

        @Menn80 thats wrong Syntax in Plain CSS You can’t Nest like this. You have to do: .modulename .small { font-size: 10px; } and don’t put it between the Curly braces of body, that is just an example and Not necessary

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

        M 1 Reply Last reply Aug 31, 2016, 5:58 AM Reply Quote 0
        • M Offline
          Menn80 @strawberry 3.141
          last edited by Aug 31, 2016, 5:58 AM

          @strawberry-3.141
          So I can pretty much remove the body writing that is in the .css file from the start?

          Andy

          S 1 Reply Last reply Aug 31, 2016, 5:59 AM Reply Quote 0
          • S Offline
            strawberry 3.141 Project Sponsor Module Developer @Menn80
            last edited by Aug 31, 2016, 5:59 AM

            @Menn80 exactly

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

            M 1 Reply Last reply Aug 31, 2016, 6:15 AM Reply Quote 0
            • M Offline
              Menn80 @strawberry 3.141
              last edited by Menn80 Aug 31, 2016, 6:16 AM Aug 31, 2016, 6:15 AM

              @strawberry-3.141
              Cool, I tried that only with

              body .small {font-size: 10px;}

              and that worked. Is this just a lazy solution? It seems like the only think that might pop up is if I do like the size of one module but I do of another. Can I than include line spacing in on that too? if so would I just add it like so?

              body .small {font-size: 10px; line-height 15px;}

              Andy

              Y 1 Reply Last reply Aug 31, 2016, 12:25 PM Reply Quote 0
              • S Offline
                strawberry 3.141 Project Sponsor Module Developer
                last edited by Aug 31, 2016, 6:22 AM

                you can put as much css rules into the curly braces as you want

                you changed the small class for everything in the body tag and everything displayed on the mirror is in the body tag, so it’s affected for all elements using the small class, the other rule affected only the small class using elements in the specific module

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

                1 Reply Last reply Reply Quote 0
                • Y Offline
                  yo-less Module Developer @Menn80
                  last edited by Aug 31, 2016, 12:25 PM

                  @Menn80 You can go as far as only writing

                  .small {
                      font-size: 10 px;
                  }
                  

                  No need for the ‘body’ tag.

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