@Nik This might be related to this thread here where people have trouble with certain calendars in MMM-MyCalendar.

But strange that it says rrule doesn’t exist. Does ~/MagicMirror/node_modules/rrule-alt/ exist?

@Damian Do you want 6x or 60%? (The former seems very small). Sorry I misunderstood about your PC; most of us use PCs as dev machines for the RPi.

If 6x (or, inverted, 1/6 or 16.7%):

body {
transform: scale(0.167); /* this might get messy, at least with any raster assets (like images) */
}

Or 60%:

body {
transform: scale(0.6);
}

According to this very interesting StackExchange question, you can also set the document’s zoom property in JavaScript (and via CSS, too):

document.body.style.zoom = 2;

@Damian I was hoping you wouldn’t have to resort to it, but you can use CSS transform: scale():

body {
transform: scale(0.8); /* for 80% */
}

Some CSS transforms are processor intensive, although without animation should be fine on an RPi.

@Damian You don’t need to download anything. Use your mouse on the MagicMirror. Right-click the compliments module, and select “Inspect element”. Or, stop MM, then run npm start dev which will start in development mode with Chromium’s developer tools already open. You then just need to navigate the DOM to find the .compliments element. Follow these instructions to take a screenshot on an RPi.

@Damian Inspect the element, and share a screenshot of the div.module.compliments element styles. At this point, either (1) your CSS is not being applied, or (2) those aren’t the right classes to use to target that element. I suspect the latter.

@Damian Use the built-in DOM inspector to see what styles are currently applied. Right-click on the compliments module and select “Inspect”.

Worst case, using !important should work:

.module.compliments {
font-size: 73% !important;
}

@Damian Does this work?

.module.compliments {
font-size: 73%;
}

Hi @Damian,

I’m on my phone atm, so will try to look in more detail later. It depends on the screen resolution, but also (as I’m sure you realize) you can fit less vertically with a landscape display.

You’re is a complicated question. I recommend a combination of repositioning and resizing.

First, you may want to see what (else) you can move to top_center and bottom_center to make more room. Alternatively, if you don’t want to use those, you could make .region.left and .region.right wider (say, 50%). But you don’t have any text “wrapping” to new lines in your module, so in your case won’t help much.

Second, you can resize by changing the font-size for the entire page (in your custom.css) like this:

body {
font-size: 73%;
}

This value will then be inherited by (or “cascade to”, hence CSS) by all other elements in the DOM (i.e. on the page). You can also change the font-size of a specific module; your “family home” calendar seems like a great contender.

Finally, you may also want to limit the width of your newsfeed.

I think this should put you on the right course. Post any questions, let us know how you fare. I’ll check in later to help if I can.

@yomm There are different regions, but most will expand to try to accommodate your content/text.

See this post moments ago here, where I give advice on how to limit the width. In your case, I believe the selector is .module.calendar.

You can also use the CSS word-wrap property to make your events break to the next line, or text-overflow to display an ellipsis when they’re cut off.

@E3V3A I don’t think there’s a reload mechanism in MM’s config.js. For example, you can have an updateInterval variable in the module config, but it’s the module’s job to then implement the refresh – it isn’t done automagically by MM.

See the code for the default compliments module for where it uses this.config.updateInterval to call setInterval() with updateDom() (to set a timer to reload the DOM after a delay) all within its start() function.