What is the best way to fit a dashboard on an iPhone screen? The screen resolution is 1334x750
I was playing with it yesterday but was not successful at all (tried many options), but nothing worked at all:
Is there any trick? Can someone share yaml code so I can get inspired, please?
Use dashboards in panel mode, this will stretch width of the card to full screen width. Obviously it makes things more complex, as panel view can handle only one card, but it can be easily overcome by using grid card and positioning additional cards within grid. Additional benefit is that you can then use mediaquery option to differentiate how the dashbord is displayed on iPhone or in regular browser. Here is example of my network monitoring dashboard in browser:
and the same dasboard on iPhone. Sorry for fragmentation, but for some reason whole page screenshot in Safari on iOS does not work with HA. In reality it is one continuous page:
Here is the part of the code (it is too big to be posted), but should explain how to make it:
type: custom:layout-card
layout_type: grid
layout_options: # this section defines vie grid for desktop browser (6 columns by 3 rows, some columns merged)
grid-template-columns: 16.6% 16.6% 16.6% 16.6% 16.6% 16.6%
grid-template-rows: auto auto auto
grid-template-areas: |
"wan wan devices devices agh agh"
"router-h router-h router-h router-h router-h router-h"
"ap-f ap-f ap-f ap-g ap-g ap-g"
mediaquery: # this section defines view for mobile devices or narrow browser, when the width of the page is below 800px
# onluy one column in this view
'(max-width: 1200px)':
grid-template-columns: 100%
grid-template-rows: auto auto auto auto auto auto
grid-template-areas: |
"wan"
"devices"
"agh"
"router-v"
"ap-f"
"ap-g"
cards: # for simplicity only one card is show to be placed in grid area named 'devices', but same rule applies to all cards
- type: custom:vertical-stack-in-card
view_layout:
grid-area: devices
horizontal: false
cards:
- type: custom:text-divider-row
text: DEVICES
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:button-card
entity: sensor.devices_all_count
icon: mdi:check-network-outline
name: WIRED
show_name: true
size: 40%
show_state: true
state_display: |
[[[
return states['sensor.fing_count_wired_devices_up'].state
]]]
card_size: 7
label: |
[[[
return states['sensor.fing_count_wired_devices'].state
]]]
show_label: true
styles:
grid:
- grid-template-areas: '"i" "s" "l" "n"'
- grid-template-columns: 1fr
- grid-template-rows: 48px 48px 32px 48px
name:
- font-size: 13px
state:
- font-size: 28px
- color: var(--ok-text)
label:
- font-size: 16px
- type: custom:button-card
entity: sensor.devices_wifi_count
icon: mdi:access-point-network
name: WIFI
show_name: true
size: 40%
show_state: true
state_display: |
[[[
return states['sensor.fing_count_wireless_devices_up'].state
]]]
card_size: 7
label: |
[[[
return states['sensor.fing_count_wireless_devices'].state
]]]
show_label: true
styles:
grid:
- grid-template-areas: '"i" "s" "l" "n"'
- grid-template-columns: 1fr
- grid-template-rows: 48px 48px 32px 48px
name:
- font-size: 13px
state:
- font-size: 28px
- color: var(--ok-text)
label:
- font-size: 16px
- type: custom:button-card
entity: sensor.devices_guest_count
icon: mdi:help-network-outline
name: GUESTS
show_name: true
size: 40%
show_state: true
state_display: |
[[[
return states['sensor.fing_count_guest_devices_up'].state
]]]
card_size: 7
label: |
[[[
return states['sensor.fing_count_guest_devices'].state
]]]
show_label: true
styles:
grid:
- grid-template-areas: '"i" "s" "l" "n"'
- grid-template-columns: 1fr
- grid-template-rows: 48px 48px 32px 48px
name:
- font-size: 13px
state:
- font-size: 28px
- color: var(--ok-text)
label:
- font-size: 16px
Thank you, Mirek, a lot! I am looking to the code and I will try the Panel mode
I am sorry, but I am not successful - my scheme is much simpler, but I am getting a blank screen 
Can you see, where the problem is?
type: custom:layout-card
layout_type: grid
views:
- path: default_view
resources:
- url: /hacsfiles/clock-weather-card/clock-weather-card.js
type: module
- url: /hacsfiles/ha-card-weather-conditions/ha-card-weather-conditions.js
type: module
- url: /hacsfiles/lovelace-card-mod/card-mod.js
type: module
- url: /local/bignumber-card.js?v=1
type: js
- url: /local/curtain-card.js
type: module
- url: /local/hass-shutter-card.js
type: module
- url: /local/hass-blind-card.js
type: module
- url: /local/mm2-clock-card.js
type: module
theme: ios-dark-mode-dark-blue
title: Home
type: panel
layout_options:
grid-template-columns: 20.0% 20.0% 20.0% 20.0% 20.0%
grid-template-rows: auto auto auto
grid-template-areas: |
"Pocasi Pocasi Pocasi Venku Venku"
"Pocasi Pocasi Pocasi Cas Cas"
"TPL_bazen_voda TPL_bazen_vzduch TPL_Koupelna TPL_Sauna Btn_Open_gate"
mediaquery:
'(max-width: 1200px)':
grid-template-columns: 60% 40%
grid-template-rows: auto auto auto
grid-template-areas: |
"Pocasi Venku"
"Pocasi Cas"
"TPL_bazen_voda TPL_bazen_vzduch TPL_Koupelna TPL_Sauna But_Open_gate"
cards:
- type: weather-forecast
entity: weather.home
name: Pocasi
show_current: true
show_forecast: true
theme: Animated Weather Card
language: cs
- title: Venku
name: Venku
style:
font-size: 100px
elements:
- entity: sensor.venku_478
style:
color: yellow
font-size: 400%
font-weight: bold
left: 50%
top: 45%
type: state-label
image: /local/abc.svg
type: picture-elements
- elements:
- title: Cas
name: Cas
entity: sensor.time
style:
color: yellow
font-size: 500%
font-weight: bold
left: 50%
top: 45%
type: state-label
- entity: sensor.weekday
style:
color: white
font-size: 200%
left: 15%
top: 90%
type: state-label
- entity: sensor.datum
style:
color: white
font-size: 200%
left: 65%
top: 90%
type: state-label
image: /local/abc.svg
type: picture-elements
- graph: none
type: sensor
entity: sensor.teplomery_bazen
name: TPL_bazen_voda
detail: 1
- graph: none
type: sensor
entity: sensor.temperature_sensor_1_382
detail: 2
name: TPL_bazen_vzduch
- graph: none
type: sensor
entity: sensor.temperature_sensor_411
detail: 1
name: TPL_Koupelna
- show_name: true
show_icon: true
type: button
tap_action:
action: toggle
entity: scene.open_gate_close_dvere_15_min
name: Btn_Open_gate
show_state: false