I’m trying to get a better experience on mobile with some extra space around the lovelace view. I cant seem to find anything that works and I can’t even modify vertical-cards to hold some overall left/right padding.
Currently if you have a phone that has waterfall screens or super slim bezels, the cards almost disappear along the edges.
Well, that was my initial thought. But not really, since it can’t support styling for views or vertical/horizontal stack cards. That means it’s something I have to either add to individual cards or I need to do some hacking to view cards in cards (like what you normally do with stacking cards).
So I want a more robust solution or if there is something I’m missing here
There are some cards where card-mod just won’t work. Those cards often are not really cards at all, but change how other cards work. Examples include: conditional , entity-filter , horizontal-stack and vertical-stack as well as some custom cards, like layout-card , auto-entities and state-switch among others.
For those cases, a special mod-card is provided as a workaround:
Haha…thanks guys, I should read more closely next time. This was exactly what I needed!
But you have to admit mod-card /card-mod is confusingly similar in the wording
Some updates: This was 99% right. It works on the web. and in a PWA on android and for the iPhone app. The only minus is the Android App where I get a big fat error on the page (Cannot assign to read only property “style” of Object '# ) So close…
But I think I need to give that feedback to the app developers for androids
An update if you happen to be in the same situation. A little extra space was in the yaml file and that made it work on desktop but not on android. When it was removed it worked flawless
Sure, I have split up all lovelace views in their own files but for one view it looks something like this (this is my weather view, there are of course a lot more theme and buttons). The padding is added at the top with padding: 8px 12px 38px 12px: