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

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.

l8kerjuan

@broberg got it. thank you!