Correct, and that’s handled by padding on the card itself, which you do not have set and that’s what @boheme61 has been saying.
card:
- padding: 10px
- min-height: 100dvh
- background-color: '#059bf1'
- background-size: cover
- border-radius: 0px
- border: 1px solid red
- overflow: hidden
- color: black
- font-family: '"Roboto", sans-serif'
- font-weight: 300
Here is another examples:
type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:button-card
entity: weather.forecast_home
show_icon: false
aspect_ratio: 2/1
styles:
card:
- padding: 0%
- color: ivory
- font-size: 12px
- height: 300px
grid:
- grid-template-areas: '"n . ." ". . sd"'
- grid-template-columns: 1fr 1fr 1fr
- grid-template-rows: 15px 1fr
name:
- font-weight: leighter
- color: white
- align-self: top
- padding: 0%
- color: |
[[[
if (entity.attributes.forecast[0].wind_bearing > 278)
return `green`;
if (entity.attributes.forecast[0].wind_bearing >= 180 && entity.attributes.forecast[0].wind_bearing < 277) return 'orange';
if (entity.attributes.forecast[0].wind_bearing >= 90 && entity.attributes.forecast[0].wind_bearing <= 180) return 'blue';
else return 'red';
]]]
custom_fields:
sd:
- width: 100%
- overflow: unset
custom_fields:
sd: |
[[[
if( entity.attributes.forecast[0].wind_bearing > 160 && entity.attributes.forecast[0].wind_bearing < 200 )
return `<ha-icon
icon="fapro:arrow2"
style="width: 35px; transform: rotate(180deg)">
</ha-icon>
`;
I simplified ( cleaned ) it to show the context
I’ve changed my card style to read:
card:
- min-height: 100dvh
- background-color: '#059bf1'
- background-size: cover
- border-radius: 0px
- border: 1px solid red
- overflow: hidden
- color: black
- font-family: '"Roboto", sans-serif'
- font-weight: 300
- padding: 0%
I am not seeing any difference in the grid. It looks the same as the screenshot I posted before. I did try the code sample you provided but was not able to get it to work as I don’t have the same entity and couldn’t modify enough to make it work. I think I get what you are showing me though.
I think what’s happening is the detail 1 cell I’m pointing to is taking up way too much space and the other two are using up the rest off the screen. What’s causing this cell to be so large? i did remove the height: 100% from all of the detail cell definitions but it did not matter.
I will try what you are suggesting with the name when I have some time. Also, my thinking on using font sizes as percentages, and frankly everything as percentages, is to try and make this layout universal and look the same on all displays. Is that the wrong way to approach this?
Yes, now you have to properly adjust all the other grid positions. So you want something like this…
- grid-template-areas: |
"date date"
"temperature detail1"
"temperature detail2"
"temperature detail3"
- grid-template-rows: min-content 1fr min-content 1fr
- grid-template-columns: 1fr 1fr
FYI 4 rows = 4 grid-template-rows values
2 columns = 2 grid-template-columns values
OK!!! This is the missing piece. I see a bit of the vertical scrollbar but I’m sure that’s due to the HA ‘top bar’ and once removed it will be exactly how it should. I thought that the min-height: 100dvh would account for that but I guess not.
I’m going to gdo a little more styling and try and add the graphic over the temperature but that should wrap this one up. I’ve learned a lot with this simple card and appreciate all the help given here and in the Discord channel.
