Messed up CSS between Portrait and Landscape monitors

Damian

Thanks, but do I download something onto the Pc to view? How do i inspect the element? There is nothing on that page to download, so how does the Dom inspector work?

ninjabreadman

@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

@ninjabreadman

😂… by pure fluke I just found the very setting I was looking for, and never even knew it was there, or even noticed it until now when instead of my usual > alt > File > Exit… or >Window > Minimise, my mouse flicked on View, and there right in front of me was Zoom In - Zoom Out!

Only trouble is if I restart/reload MM it reverts back, and I have to zoom out again x 6 so it looks good… anyone know how to set it so it stays at my set zoom?

Thanks to all who assisted here to try and solve this… I will now sneak off in embarrasment😶

ninjabreadman

@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

@ninjabreadman

Thanks, but this is on a PC not a Pi … I have posted another post incase it gets lost in here, to find out if there is a setting to make to keep my MM Zommed out x 6, but I will try your suggestion here and see if that helps, as being a PC it should handle it eh?

Mykle1

@Damian

While MM is running, press these keys at the same time:

Default Display Size = Control and 0 (That’s a zero)

Zoom In = Control and Shift and = (That’s an equals sign)

Zoom Out = Control and - (That’s a dash/minus sign)

ninjabreadman

@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

@ninjabreadman

Sorry, what I meant by x 6 was pressing the Zoom Out six times to get everything fitting the way I like it on screen. I’m home in a few hours so will play about with your suggestions and see how they fare.

Damian

@Mykle1

Thanks for that Mykle, will save numerous clicks to get top menu then Zoom Out.

Glad I have at least found a workable solution, and had another read of your Read Me on your MMM.Lucy to get familiar when setting up everything. I managed to get exactly the same Mic as yours, and also seen the PS3 Eye one going cheap, so thought “Why not?” I’m sure I will go for the weaker version of MMM.Lucy for my Pi MM, so will use the PS3 Eye for that 😉

Mykle1

@Damian said in Messed up CSS between Portrait and Landscape monitors:

I’m sure I will go for the weaker version of MMM.Lucy for my Pi MM

Suggestion: Don’t even try to use the animated.gif of the face on your Pi. That will surely bring it to a screeching halt. Use a simple picture file, or none.