Changing size/font for a module but not the whole region

[CheapDad]

I’ve read the “Getting started” thread and a thread that sdetweil directed me to. Here’s where I’m running into issues:

I have the default clock, mmm-monthly_calendar and the default calendar all located in top_left. Both mmm-monthly_calendar and the default calendar are wider than I’d prefer.

Reducing the pixel width of the region gets me to where I want to be:

.region.top.left {
  width: 100%;
  max-width: 300px;
  min-width: 10vw;
}

However, when I do that, the font size for the default calendar is too large to fit everything in that space, so it wraps, making the length of the feet (vertically) too large.

I tried adjust the font size, but nothing happened:

.MMM-calendar {
  font-size: 24px;
}

In the calendar.css, the font size is identified as variable, which I think is part of my problem:

font-size: var(--font-size-small);

While we’re at it, even at the default sizes, the default calendar module is unable to display all of the data sends to the module, so I get an ellipse at the end. Is it possible to code the css so that all data is shown, with it wrapping in order to do so?

TIA, CheapDad

[sdetweil]

@cheapdad said in Changing size/font for a module but not the whole region:

.MMM-calendar

isn’t that .MMM-Calendar

case matters

also
read this
https://forum.magicmirror.builders/topic/14862/help-with-a-couple-css-issues?_=1625369547195

about how to use the developers window to test out the changes needed

one thing not known then

once you figure out the settings, you can copy paste the top right window to paste into your css entry in custom.css