MMM-Hoymiles-Wifi

[Jose1701]

@sdetweil

Alright, I will try to get some info in the internet. Never done sth with css.

Thanks

[sdetweil]

@Jose1701 I understand , the browser provides a developer environment with different capabilities

logger
code execution
and elements viewer, css tester env

see the second link in my signature below for a starter course on the elements tab.

[evroom]

@Jose1701

No, sorry, no idea.
What Sam says, but that needs knowledge.
But I opened an issue/request, so let’s see if it will be granted:
https://github.com/CuddlyCow/MMM-HoymilesPVMonitor/issues

[Jose1701]

@evroom

ok. Thank you for your patience and help.

[sdetweil]

@Jose1701 also. Sometimes the author documents it on the readme, sometimes the author provides their own css you can override w custom.css entries

Sometimes it’s all grunt work….

[Jose1701]

I spent a bit of time an got the following to work by using help of a friend.
I wrote the following in the css:

/* custom.css */

/* Passt die Gesamtbreite des gesamten Moduls an */
.MMM-HoymilesPVMonitor {
    /* Beispiel: Setzt die maximale Breite des gesamten Moduls auf 200 Pixel */
    max-width: 200px; 
    /* Stellt sicher, dass das Modul zentriert bleibt, falls es kleiner als die Spalte ist */
    margin-left: auto;
    margin-right: auto;
}

/* 
  Passt den inneren Container an, der das Canvas-Diagramm enthält.
  Dies überschreibt die 95% Breite, die im JS definiert wurde.
*/
.MMM-HoymilesPVMonitor div:first-child {
    /* 
      Setzt die Breite des Containers auf 100% der oben definierten max-width (z.B. 200px).
      Sie können hier auch absolute Werte (z.B. 180px) verwenden, 
      aber 100% ist am flexibelsten.
    */
    width: 100% !important; 
}

Now it is smaller, nevertheless I can’t get it much more smaller because the gauge will disappear then.

(It’s not displayed correctly in the screenshot, but it is on my mirror.)