7″ touchscreen - module size and overlapping issues.

Marius

Hello everyone,

I an new to MM2, just got it up running with modules that I prefer…

I using a 7 inch rp display (800x480), however, i got issues due to modules overlapping.

I have tried to custom css file by my self but ending up with nothing or failure results.

could someone help me?

evroom

@Marius

Hi,

Last week I setup a Pi with the Pi display and noticed this too.
As I only was interested in testing 1 module, I did not bother too much.
Most persons of course use HD, full HD or even higher pixel density.
The modules do not care about your screen and have their own sizes, characters sizes, margins, etc.
They do not auto-adjust, in general, perhaps there are exceptions.
I do not known about generic settings that can be adjusted, so it seems you will need to adjust each module in the custom.css.
Personally I think there is only space for max. 4 modules per screen/page.
There are modules that can rotate pages or even rotate modules in 1 page, allowing you too run more modules.

This will supply you with a bit more effective total space:

body {
  margin: 1px;
  height: calc(100% - 1px);
  width: calc(100% - 1px);
}

For starters.

Mykle1

@Marius

Try the commands from this tutorial to manage the size of the modules in real time

https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners

Marius

@evroom
Thank you!
That really worked quit well for my setup.

@Mykle1
I tried that, however, it was not what i looked for.

So, is there anyway that i can resize a module only ? My Netatmo module still looks a but too big. Another thing i notice that sonos module is overlapping when text get to long when playing a certain song…

see below, please :)

https://imgur.com/a/ZiulbqI

broberg

@Marius

You can either use the “zoom” function in css, like ..modulename { transform: scale(0.8) }

Or you can set a specific width for the module so it forces the text to get a row break like .modulename { width: 200px; }

Marius

@broberg
Thank you for the help. Now i got i all sorted out :)

Btw, how can I delete/hide text “4 minutes ago” update text, please see picture in post above. I have been looked in netatmo.js and netatmo.css file without any luck.

broberg

@Marius

possibly the " hideLoadTimer: false," configuration option? (change to true if not already)

or maybe .MMM-Netatmo .updated {visibility: hidden;}

CyruS1337

@Mykle1 said in 7″ touchscreen - module size and overlapping issues.:

@Marius

Try the commands from this tutorial to manage the size of the modules in real time

https://forum.magicmirror.builders/topic/5619/how-to-find-and-use-key-commands-in-mm-for-absolute-beginners

Is there also a tutorial about the custom.css. I have the following problem.
Before the hard reset, I changed the costum.css so that the modules were really in every corner of the monitors. Thus, the display on the monitor was optimally utilized before the module disappeared behind the edge of the monitor. Unfortunately I do not know the attitude anymore.

Mykle1

@CyruS1337 said in 7″ touchscreen - module size and overlapping issues.:

Is there also a tutorial about the custom.css.

https://forum.magicmirror.builders/topic/6808/css-101-getting-started-with-css-and-understanding-how-css-works

Also, there is a wealth of css info online. Google your css questions and see what you get.

CyruS1337

@Mykle1 OK everything good. I have not asked Google, I will also google ask.

Many Thanks