Navigation

    MagicMirror Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • Donate
    • Discord

    Screen Font is too big

    Troubleshooting
    4
    17
    11425
    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.
    • T
      thiagofneves last edited by

      Hi guys, I successfully installed the MagicMirror and everything is working good, except for the size of the fonts, Its taking almost the whole screen all the info… Anyway to reduce the size ? Thank you

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

        you can set your own font-size in MagicMirror/css/custom.css

        T 1 Reply Last reply Reply Quote 0
        • T
          thiagofneves last edited by

          Oh really? I will take a look… Thanks a lot!

          1 Reply Last reply Reply Quote 0
          • T
            thiagofneves @strawberry 3.141 last edited by

            @strawberry-3.141 said in Screen Font is too big:

            you can set your own font-size in MagicMirror/css/custom.css

            No example of how to do that, no?
            Its empty!

            Thanks

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

              change it globally e.g.

              body {
                  font-size: 1em
              }
              

              to change it more precisely use specific selectors to change it

              M yo-less 2 Replies Last reply Reply Quote 0
              • S
                spideyfreak1983 last edited by

                I am having the same issue. Could you define “specific selectors”?

                1 Reply Last reply Reply Quote 0
                • M
                  Menn80 @strawberry 3.141 last edited by

                  @strawberry-3.141 said in Screen Font is too big:

                  font-size: 1em

                  I did this and the font size did not change. I went down to .25em, I also tried to go to 50%. What would I be doing wrong?

                  yo-less 1 Reply Last reply Reply Quote 0
                  • yo-less
                    yo-less Module Developer @Menn80 last edited by

                    @Menn80 What did you want to change specifically?
                    Just let us know and I can provide you with instructions.

                    M 1 Reply Last reply Reply Quote 0
                    • M
                      Menn80 @yo-less last edited by Menn80

                      @yo-less I added

                      font-size: 1em to the custom.css file. When that didn’t work after some research I tried changing that down further. I than tried using %. When that didn’t work I removed that from the custom.css file and changed in the main.css file. I’m doing a test run on a 32inch tv and I’ve rotated it. It takes up the entire top 1/3 of the screen between the clock 30 day calendar and default weather.

                      I like the ratio of everything so I would prefer to change it all at once.

                      1 Reply Last reply Reply Quote 0
                      • yo-less
                        yo-less Module Developer @strawberry 3.141 last edited by yo-less

                        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 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 Paul-Vincent Roll and Rodrigo Ramírez Norambuena.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy