The issue I’d like to fix is the black space under the large square buttons. On my mobile devices, the large buttons resize to fill the space, or just happen to magically fit. On Windows, regardless of browser, there is that black area. IS there some way to make it look the same on both platforms?
type: grid
cards:
- type: grid
cards:
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/entrance
name: Entrance
show_icon: true
icon: hass:door-open
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/kitchen
name: Kitchen
show_icon: true
icon: hass:stove
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/living-room
name: Living<br/>Room
show_icon: true
icon: hass:sofa-outline
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/master-suite
name: Master<br/>Suite
show_icon: true
icon: hass:bed-king-outline
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/powder-room
name: Powder<br/>Room
show_icon: true
icon: hass:toilet
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/study
name: Study
show_icon: true
icon: hass:desk-lamp
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/utility-room
name: Utility<br/>Room
show_icon: true
icon: hass:washing-machine
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/game-room
name: Game<br/>Room
show_icon: true
icon: hass:gamepad-variant-outline
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/upstairs-bathroom
name: Upstairs<br/>Bathroom
show_icon: true
icon: hass:shower
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/office
name: Office
show_icon: true
icon: hass:desk
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/kids-bedroom
name: Kids<br/>Bedroom
show_icon: true
icon: hass:bunk-bed-outline
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/media-room
name: Media<br/>Room
show_icon: true
icon: hass:projector
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/guest-bedroom
name: Guest<br/>Bedroom
show_icon: true
icon: hass:bed-outline
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/garage
name: Garage
show_icon: true
icon: hass:garage-variant
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/outdoors
name: Outdoors
show_icon: true
icon: hass:pine-tree
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/attic
name: Attic
show_icon: true
icon: hass:home-roof
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/safety
name: Safety
show_icon: true
icon: hass:shield-star-outline
layout: icon_name
- type: custom:button-card
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
name:
- text-transform: uppercase
- font-size: 10px
- font-weight: normal
- justify-self: center
- margin-left: '-25px'
- letter-spacing: 2px
icon:
- color: var(--paper-item-icon-color)
- height: 25px
- width: 25x
- padding: 0px 20px 0px 0px
tap_action:
action: navigate
navigation_path: /lovelace/it
name: IT
show_icon: true
icon: hass:server-network
layout: icon_name
columns: 1
square: false
- type: grid
cards:
- type: custom:button-card
entity: binary_sensor.front_door
name: Front<br/>Door
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
state:
- value: open
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: closed
tap_action:
action: more-info
show_icon: true
show_state: false
- type: custom:button-card
entity: binary_sensor.garage_door
name: Garage<br/>Door
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
state:
- value: open
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: closed
tap_action:
action: more-info
show_icon: true
show_state: false
- type: custom:button-card
entity: binary_sensor.patio_door
name: Patio<br/>Door
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
state:
- value: open
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: closed
tap_action:
action: more-info
show_icon: true
show_state: false
- type: custom:button-card
entity: cover.overhead_garage_door
name: Overhead<br/>Garage Door
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
icon:
- color: var(--paper-item-icon-color)
state:
- value: open
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: closed
tap_action:
action: more-info
show_icon: true
show_state: false
- type: custom:button-card
entity: binary_sensor.backyard_gate_sensor
name: Backyard<br/>Gate
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
icon:
- color: var(--paper-item-icon-color)
state:
- value: 'on'
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: 'off'
tap_action:
action: more-info
show_icon: true
show_state: false
- type: custom:button-card
entity: input_boolean.smoke_alarm
name: Smoke<br/>Alarm
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
state:
- value: 'on'
color: red
icon: mdi:skull-crossbones-outline
styles:
icon:
- animation:
- blink 2s linear infinite
- value: 'off'
icon: mdi:fire
tap_action:
action: more-info
show_icon: true
show_state: false
columns: 1
square: false
- type: grid
cards:
- type: custom:button-card
entity: lock.front_door_lock
name: Front Door<br/>Lock
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
icon:
- color: var(--paper-item-icon-color)
state:
- value: unlocked
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: locked
tap_action:
action: more-info
hold_action:
action: toggle
show_icon: true
show_state: false
- type: custom:button-card
entity: lock.garage_door_lock
name: Garage Door<br/>Lock
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
icon:
- color: var(--paper-item-icon-color)
state:
- value: unlocked
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: locked
tap_action:
action: more-info
hold_action:
action: toggle
show_icon: true
show_state: false
- type: custom:button-card
entity: lock.patio_door_lock
name: Patio Door<br/>Lock
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
icon:
- color: var(--paper-item-icon-color)
state:
- value: unlocked
styles:
icon:
- color: red
- animation:
- blink 2s linear infinite
- value: locked
tap_action:
action: more-info
hold_action:
action: toggle
show_icon: true
show_state: false
- type: horizontal-stack
cards:
- type: custom:button-card
entity: cover.overhead_garage_door
name: Open
icon: mdi:garage-open-variant
show_icon: true
show_state: false
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
icon:
- color: var(--paper-item-icon-color)
tap_action:
action: more-info
hold_action:
action: call-service
service: cover.open_cover
service_data:
entity_id: cover.overhead_garage_door
- type: custom:button-card
entity: cover.overhead_garage_door
name: Close
icon: mdi:garage-variant
show_icon: true
show_state: false
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
icon:
- color: var(--paper-item-icon-color)
tap_action:
action: more-info
hold_action:
action: call-service
service: cover.close_cover
service_data:
entity_id: cover.overhead_garage_door
- type: custom:button-card
entity: input_boolean.intrusion_alarm
name: Intrusion<br/>Alarm
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
state:
- value: 'on'
color: red
icon: mdi:shield-alert-outline
styles:
icon:
- animation:
- blink 2s linear infinite
- value: 'off'
icon: mdi:shield-home-outline
tap_action:
action: more-info
show_icon: true
show_state: false
- type: custom:button-card
entity: input_boolean.water_leak_alarm
name: Water Leak<br/>Alarm
styles:
card:
- border-style: dashed
- border-width: 1px
- border-color: gray
- height: 128px
name:
- text-transform: uppercase
- font-size: 12px
- font-weight: normal
- justify-self: center
- letter-spacing: 1px
- padding-bottom: 5px
tap_action:
action: navigate
navigation_path: /lovelace/safety
hold_action:
action: toggle
show_icon: true
show_state: false
show_entity_picture: true
state:
- value: 'on'
color: red
icon: mdi:water
styles:
icon:
- animation:
- blink 2s linear infinite
- value: 'off'
icon: mdi:water-off
columns: 1
square: false
columns: 3
square: false