SOLVED Small screen makes modules overlap
I was using a monitor to use MagicMirror at first, then changed to using a 7" screen. This made all my modules overlap and look super clustered. Does anyone know how to fix this? Or would ordering a 10" screen solve the problem?
Try shrinking the modules while MM is running
Zoom Out = Control and - (That’s a dash/minus sign)
The modules usually have fixed pixel widths and heights, so when two modules in one row both have 300 px width and the screen is 800 px wide, there’s 200 px space in between or left and right but when the screen is only 500 px wide, you’ll have at least 100 px overlap (if there’s no space left and right).
A bigger screen might not help if it has the same resolution (compare 1024 px 15" and 1024 px 19").
What you’ll probably need to do is (manually) scale down all modules’ sizes in your
custom.css. In theory, if all settings were done in
rem, you could just change the default font size and be done, but … that’d be too easy.
You are welcome, sir. Enjoy your MM experience.