Adjust modules size to match each other (weather/calendar)

[A Former User]

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

[MichMich]

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

[l8kerjuan]

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

[l8kerjuan]

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

[tosti007]

@l8kerjuan did you change the values of font-size? I didn’t check, but I assume those are the default values

[l8kerjuan]

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

[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

[l8kerjuan]

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

[tosti007]

@l8kerjuan good to hear, you’re welcome!

[broberg]

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