I would like to right-align the secondary text on a mushroom template card.
I am new to card-mod so I’m still learning.
I want to do this:
This is the code I currently have that is not working:
card_mod:
style: |
mushroom-state-info$: |
span.secondary {
text-align: right !important;
}
ha-card {
padding: 5px !important;
}
Can anybody help me out?
Right alignment is the default …
Not on my side: The default is on the left:
And I want the secondary text on the Right
That is me getting left and right confused as usual 
I got the secondary text to align right. But there is something wrong with my formatting as the padding is not being applied. Any ideas about what I am doing wrong?
card_mod:
style:
mushroom-state-info$: |
.secondary {
text-align: right;
}
ha-card {
padding: 5px !important;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 15px;
}
Could it be that some indentations are incorrect?
Try this:
card_mod:
style:
mushroom-state-info$: |
.secondary {
text-align: right;
}
ha-card {
padding: 5px !important;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 15px;
}
I thought so too. But not sure where.
This is the error I get with the above
Configuration errors detected:
can not read a block mapping entry; a multiline key may not be an implicit key (35:14)
32 | text-align: right;
33 | }
34 | ha-card {
35 | padding: 5px !important;
-------------------^
36 | }
37 | mushroom-shape-icon$: |
Hmm…
And if you change the order like this?
card_mod:
style:
ha-card {
padding: 5px !important;
}
mushroom-state-info$: |
.secondary {
text-align: right;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 15px;
}
Same error. I think the issue is related to the ha-card to being in a different format to the others. I am not sure how to change that.
I have tried the below but that does not work.
ha-card$: |
{
padding: 5px !important;
}
I finally found what I was doing wrong:
card_mod:
style:
mushroom-state-info$: |
.secondary {
text-align: right !important;
}
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 20px !important;
}
.: |
ha-card {
padding: 5px !important;
}
For detailed explanation:
Well done! 
I already knew that GitHub page, but initially could not find the info about your solution.
But it appears to be hidden in the DOM navigation Example:
In there it is explained that the <ha-card> element is the base, and to set the padding of the <ha-card> you have to point directly to the base element in this case, which can be done with the “.” (dot) key.
