I am using the layout-card mediaquery to show a card only on a smartphone, but the bloody thing is adding some row space (padding/margin) when hidden, and it’s diving me crazy!
I just can’t figure out how to remove those 2-3mm of row spacing.
So, let’s break down my setup and see if you guys can help 
Here is a typical dashboard view, bedroom in this case
### Bedroom Dashboard View
title: Bedroom
path: bedroom
icon: mdi:bed-king
theme: Mushroom Shadow
visible: !include ../../permissions/family.yaml
type: custom:grid-layout
layout: !include ../layout-3col.yaml
badges: []
cards:
# Menu
- type: custom:decluttering-card
template: menu
variables:
- select: bedroom
view_layout:
grid-area: menu
show:
mediaquery: "(min-width: 500px)"
# Content Left
- type: vertical-stack
view_layout:
grid-area: content-left
cards:
- type: custom:decluttering-card
template: view-title
variables:
- title: Bedroom
- !include lights.yaml
- !include controls.yaml
# Content Right
- type: vertical-stack
view_layout:
grid-area: content-right
cards:
- !include sensors.yaml
- !include sensors-graph.yaml
Here is the included layout-3col.yaml for reference
grid-template-columns: 30% 35% 35%
grid-tempalte-rows: auto
grid-template-areas: |
"menu content-left content-right"
mediaquery:
"(max-width: 500px)":
grid-template-columns: 100%
grid-tempalte-rows: auto
grid-template-areas: |
"menu"
"content-left"
"content-right"
"(max-width: 1100px)":
grid-template-columns: 45% 55%
grid-tempalte-rows: auto
grid-template-areas: |
"menu content-left"
"menu content-right"
And here is the culprit! The view-title.yaml which is in-fact a “custom:decluttering-card” loaded in the bedroom view
view-title:
card:
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 80px auto
grid-tempalte-rows: auto
grid-template-areas: |
"left right"
cards:
- type: horizontal-stack
view_layout:
show:
mediaquery: "(max-width: 500px)"
cards:
- type: custom:mushroom-chips-card
chips:
- type: back
alignment: start
view_layout:
grid-area: left
- type: custom:mushroom-title-card
title: "[[title]]"
alignment: start
card_mod:
style: |-
ha-card {
margin-top: -20px;
margin-bottom: -20px;
}
view_layout:
grid-area: right
The “view-title” decluttering card, which is in fact the title of the page with a back button, is hidden on any device with a screen larger then 500px, BUT it renders some empty space, and since this is the first line/card in on the page/column, it pushes everything down by few millimeters.
If I comment out (remove) the declutter-card from the (bedroom) view, the space is reclaimed. So, it’s definitely the custom:declutter-card with the custom:layout-card that is adding this space when hidden.
As you can see on this screenshot, the “Lights” subtitle is pushed just a bit down, because the hidden view-title declutter card is just above it.
Any ideas?