Hi all,
I am working on a picture-element card in HA where the whole heating system of the house should be displayed. I finished with this on my laptop and everything looks good in full screen. Here an example:
Nevertheless, if I rescale the window size, the size of the state-badge stay the same ā they become to bigā¦ How can I archive it that they also get defined their sizes in % of the window size?
I believe that this should be possible with card-mod, am I right?
Note that on a smaller viewport elements become BIGGER (respectively to the main image).
This may be solved by scaling elements differently on different viewports ("transform: translate(-50%,-50%) scale(diff_scale_value,diff_scale_value)").
Two ways may be used:
ā the whole floorplan card is a decluttering-card - pass a scale value as a variable;
ā use card-mod to set scales conditionally dependingly on a current viewport (use āmediaqueryā).
I already saw this but I couldnāt figure out what I have to do in order to solve my problemā¦ How can I read out the window width and height in order to change the diff_scale_value accordingly?
In my setup I gave up attempting to adjust scales dynamically and ended up with fixed scales for 3 resolutions (desktop, phone, tablet) - these scales are passed as variables into a decluttering template.
To define scales dynamically - you may try using smth like (untested):
Coeff = 100vh / 1920px - gives a ratio which is ā1.0ā for a desktop, and is different for other clients;
scale = some_default_scale * Coeff
Always think first, that most probably a lot of users such questions before and go through some example from Ildar or in this thread. And you will directly see the answers.
Hello!
I tried many hours to make the header (Neue Filme) in height smaller, but it isnāt working! Can someone please give me a tip?!
Here is the code! Thanks a lot!
type: vertical-stack
cards:
- type: custom:mini-media-player
entity: media_player.spotify_stefan
volume_stateless: false
toggle_power: false
group: false
info: scroll
name: Stefan, Michi & Elina
source: full
power_state: true
background: '"/local/spotify4.jpg"'
artwork: full-cover
hide: null
power: true
- type: custom:upcoming-media-card
title: Neueste Filme
entity: sensor.emby_latest_movies
image_style: fanart
title_size: small
line1_size: small
line2_size: small
line3_size: small
line4_size: small
flag: false
card_mod:
style: |
ha-card.type-custom-upcoming-media- card {
line-height: 2px;
background-size: 100%;
}
Iāve scoured every corner of this thread (and others) and cannot find anything. Can someone help me with this? Iām trying to change the colour of the background behind the title and cards of the Horizontal Stack. Iāve attached my attempt which does not work. Iāve also tried ābackgroundā in place of color, with no success.
Any ideas?
Another issue that I canāt seem to find a solution for. I would like to increase the size of the fonts for the Weather Forecast lovelace card. Managed to increase the day line and the low temp forecast line, but canāt seem to figure out how to increase the high temp line.
Please helpā¦ ?
Screenshot attached.
Thanks again.
Thanks a lot for the promt help. I just came to test this and it works perfect. Is there also a way to remove the rounding of the upper corners? Is there a way to move the icons closer to the camera image?
The doc for card-mod can be found here and this is a useful tool for navigating the dom structure.
As for removing the rounded borders, you should look into the CSS border-radius property. For the space, youāll have to use your browserās dev tools to find where that comes from in order to reduce it.
) but itās working.
