Since I have really tried so much it is not doable anymore to reproduce what I have tried.
In the end I have tried all kinds of wrong things (css, cards, mods, Code copy, etc.). So I tried to ask my question the other way around initially. By writing it down as above I hope I will be able to get some help on how to scale a large image so it always fits the screen (mobile, 16:9, other browsers, browser in other format !=16:9, etc.)
I believe your issue is clear now.
And I believe the custom layout card is the solution for you.
Try to create a column or a grid with a column of 80% the screen size using:
Sory, I really do not know now what to doā¦ should I change this:
layout:
grid-template-columns: auto 30px 25%
grid-template-rows: auto
grid-template-areas: |
to this
layout:
grid-template-columns: auto 30px 25%
grid-template-rows: auto 30px 25%
grid-template-areas: |
because that does not do anything. sorry I am not a programmer but wanting to learn. And this is too steap leaning for nowā¦ appreciate all the help I can getā¦
Found out a solution:
Changing a nameās width and margin-top are required.
- entity: sensor.cleargrass_1_co2
name: name font for a very long name
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .title {
margin-top: 11px !important;
}
.: |
:host {
--ha-label-badge-title-font-size: 7px;
--ha-label-badge-title-width: 48px;
}
Worked like a charm, thank you! Quick follow-up question: how would this behave when used as an element on a picture-element card? As I understand it, masonry view is not applicable to said elements or am I mistaken?
Actually, I have two button-cards with picture-entites next to each other. The actual pictures are made to fit together, so setting masonry-view-card-margin on those specific cards allows for the following look to be achieved:
The code I wrote is used as an !include on a basic yaml view, but will also serve on top of a picture-elements card on another view, hence my question.
Not really on-topic, but since there are experienced people with css and HA, I think this is the best place to ask. It indirectly has to do with card-mod though. So If I have a dashboard with a lot of CSS stylings, custom cards (like RomRiderās button-card) and all autogenerated using auto-entities.
What would be the bottleneck in rendering the dashboard: strictly the device accessing it, like the tablet or smartphone. Or the device running HA (like a Raspberry Pi 4). My first thought was the device accessing HA, since itās a webpage and the device needs to render it. But at the same time, HA needs to output everything and acts as a server.
I ask this, because my performance has been horrible over the past month. So much so, that some cheaper tablets completely refuse the update the dashboard or load completely. Lately even my desktop (12 core Ryzen, 32GB RAM) has also been struggling.
I use a lot of css stylings and card-mod, browser_mod, button-card, decluttering card and auto-entities. Does card-mod have a huge impact on performance when combining with those cards? Two months ago performance of my dashboard was miles better. Nothing changed, only updated the cards used.
Sorry if this is the wrong place to ask. I first wanted to ask if people were having performance issues using card-mod, but then thought that perhaps itās not card-mod, but something else.