Messed up CSS between Portrait and Landscape monitors

ninjabreadman

@Damian Does this work?

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

Damian

@ninjabreadman

Unfortunatley not ☹
I am now at a loss as to what to try now as this is first time trying MM on Landscape, and I am not liking it at all because I am unsure how to minimise the modules… a simple Zoom out would be perfect as my screen looks like its 100% zoomed in.😣

ninjabreadman

@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

@ninjabreadman

Nope, that never worked either😣

I cannot fathom out what is going on, even when I first loaded up the default MM it all looked too big. Thats why I then added in my config.js and CSS stuff from my Pi foders to see if they would help minimise things any.

ninjabreadman

@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

@ninjabreadman

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?