Then you didnāt get the problem. 
Anyhow, Iām happen now with my setup and I have optimized it, to not having any card-mod now needed for this case. Card mod has unfortunately the problem, that it is sometimes assigned too late and then I have the stuttering, etc. (In some browser, devices, situations) And in this special case it was not pretty, neither to remove gaps or to add them. As said, no improvements here needed.
Replacing this may cause glitches (may give different results on different devices).
Seriously - sometimes it is better to create a template sensor.
- entity: sensor.memory_free
name: replaced unit
card_mod:
style:
ha-state-label-badge $ ha-label-badge $: |
.badge-container .label-badge .label span::after {
content: "xxx";
color: blue;
letter-spacing: normal;
}
.badge-container .label-badge .label span {
color: transparent;
letter-spacing: -8px;
}
maybe 
just to be clear what I meant there:
#type: custom:stack-in-card
#card_mod:
# style: |
# ha-card {
# margin: -16px;
# box-shadow: none;
# }
#keep:
# background: true
#cards:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
:host {
--stack-card-margin: 0px;
}
card:
type: custom:hui-element
card_type: vertical-stack
cards:
and no further mods required. It tightly knits all enclosed cards together. No gaps. very clean.
if this be done cleaner, Id be interested for sure.
Ill have to lookup you card solution though, because its not easy to find the final card config you ended up with in all posts aboveā¦
note the margin and box-shadow here are only used because this card is included in an auto-entities card.
meaning, if youād use this as a stand alone card, all modding of the core vertical-stack card would be the
:host {
--stack-card-margin: 0px;
}
This
was the problem. Everything else is clear. So from there I was going to have a someting which is looking as the standard vertical stack but with ha-card-element and without mod-card. And this was solved by the vertical-stack-in-card.
I only referenced you, because I didnāt have any problems with vertical-stack-in card but with stack-in-card I have. And somewhere you have written the opposite, that you are not using vertical-stack-in card because you had several problems with vertical-stack-in card, and you are only using only stack-in-card because of this. Curious to read, that this is not the case anymore, and you removed stack-in-card because of problems (I had always). 
BTW, not related to my topic, but only saw this in your example.
is redundant. You can card vertical-stack directly. This is the clue from mod-card. 
A yes, I see.
I donāt see the changed order in cards. So never bothered to look into that aspect.
Maybe because I have a layout set on the view.
As for the hui-element: I need that because the card is used inside another card, but will check once again. Thx.
update
can confirm that using:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
:host {
--stack-card-margin: 0px;
}
card:
type: vertical-stack
cards:
works nicely too, thanks for the correction.
apparently we can list core vertical-stack in a core entities card. Never realized that. cool. will clean up possible other cards too
@arganto so you know I tested vertical-stack-in-card too: it still needs both the hue-element and the card_mod styling to embed it correctly in my auto-entities card:
type: custom:hui-element
card_type: custom:vertical-stack-in-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
cards:
or:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none;
}
card:
type: custom:vertical-stack-in-card
cards:
which are essentially the same. Though the mod-card is officially wrong, since the vertical-stack-in-card has a ha-element ;-0
so, returning to the mod-card on vertical-stack has my preference, it will never be out of sync with the core Frontend.
fyi, the auto-entities does:
- type: custom:auto-entities
card:
type: entities
show_empty: false
filter:
include:
- entity_id: media_player.plex_*
state: /playing|paused|'on'/
options:
!include /config/dashboard/includes/include_plex_playing.yaml
I am having an issue after the most recent update where the text size isnāt being respected. When I open HA, the text increases on my one markdown but if I leave the tab and return, it goes back to normal. I have had this setup for a year or so and no issues until the most recent update. Here is my yaml
- cards:
- content: |
# Living Area
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px !important;
margin-top: 15px;
color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
And then here is what it looks like vs normal.
Not related to your issue, anyway - do you understand what happens to the style when your condition is FALSE?
Itās just white, which is what Iām after. Or are you saying that the false is messing up the text size?
This is up to a browser to decide how to handle errors.
Check this.
As for your card - what do you expect to see here:
Thanks, Iāll add in that portion about the error.
As for your question, I am expecting to see the Living Area text, which shows up, just in variable sizes. Is that what you mean?
I just wanted to note that this set of āheightā & āmargin-topā causes the card to look strange.
Check a small example - your card is placed in a stack between two cards:
type: vertical-stack
cards:
- type: entity
entity: sun.sun
- type: markdown
content: Living Area
card_mod:
style:
ha-markdown $: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px !important;
margin-top: 15px;
color: red;
}
- type: entity
entity: sun.sun
Without those 2 cards:
P.S. Do not bother that I removed ā#ā for a ācontentā, my post is about āheightā & āmargin-topā only.
Nothing is changed with ā#ā (except font etc for the content):
Like many of us, Iām using nested vertical/horizontal-stack cards, stack-in-cards, and mushroom cards (mostly chip and template) to assemble an overview, wellā¦view.
Is there a way to make a CSS setting apply to all elements within a dashboard or does every card-mod block have to be inserted into each separate card? My understanding is that CSS is hierarchical, but not sure how to translate that for efficient use of card-mod (e.g. place a single card-mod block in a vertical-stack that increases the font size of all elements it containts).
No variable font size there. Seems to work fine. Whatās strange is that only one of the markdown cards increases in text size, the other doesnāt
I do not understand you.
Please post a code for this card.
Here is the yaml for the card that I posted above. The Living Area text changes in size since the most recent update, where the There are currently.... text remains the same in terms of text size
- cards:
- content: |
# Living Area
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px !important;
margin-top: 15px;
color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
- content: >
There {% if is_state('input_text.living_area_helper',
'0') %} are currently no lights on {% elif
is_state('input_text.living_area_helper', '1') %} is
currently {{states('input_text.living_area_helper')}}
light on {% else %} are currently
{{states('input_text.living_area_helper')}} lights on
{%
endif %}
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
color: {% if states('input_text.living_area_helper') | float > 0 %} gold {% endif %};
}
ha-markdown:
$: |
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
Your code is not properly formatted to be analysed.
Sorry. I had it as block code. I adjusted.
Btw, you keep posting this. As I told you - it causes errors.
I do not see any āh1ā text here.
Also, regarding your construction:
style:
.: |
ha-card {
}
ha-markdown:
$: |
h1 {
}
I do not think it is right.
Check these examples:
type: vertical-stack
cards:
- type: markdown
content: |
# ha-markdown $
card_mod:
style:
ha-markdown $: |
h1 {
font-size: 10px;
}
.: |
ha-card {
background-color: red;
}
- type: markdown
content: |
# ha-markdown:
# $:
card_mod:
style:
ha-markdown:
$: |
h1 {
font-size: 10px;
}
.: |
ha-card {
background-color: red;
}
- type: markdown
content: |
# ha-markdown $
card_mod:
style:
.: |
ha-card {
background-color: red;
}
ha-markdown $: |
h1 {
font-size: 10px;
}
- type: markdown
content: |
# ha-markdown:
# $:
card_mod:
style:
.: |
ha-card {
background-color: red;
}
ha-markdown:
$: |
h1 {
font-size: 10px;
}
2 Likes
Thank you. I will review and try and modify per your example. Also, I didnāt update the code, because I wanted to keep the base case, so thatās why you kept seeing the aforementioned error. But thank you for the patience and help and I will try and work through based on your example