Screen Font is too big

thiagofneves

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

strawberry 3.141

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

thiagofneves

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

thiagofneves

@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

strawberry 3.141

change it globally e.g.

body {
    font-size: 1em
}

to change it more precisely use specific selectors to change it

spideyfreak1983

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

Menn80

@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

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

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.

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.

Menn80

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

strawberry 3.141

@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

Menn80

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

strawberry 3.141

@Menn80 exactly

Menn80

@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;}

strawberry 3.141

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

yo-less

@Menn80 You can go as far as only writing

.small {
    font-size: 10 px;
}

No need for the ‘body’ tag.