Web dashboard views vs phone app views - sizing?

Configuration Frontend
1

What I am wondering is how best to deal with this and how others have configured theirs…

For instance, this column in overview dashboard looks like this:

image
image456×890 129 KB

and on my phone it looks like this…

image
image323×662 62.9 KB

the code is:

type: vertical-stack
cards:
  - type: markdown
    content: '## Home'
    style: |
      ha-card {
      text-align: center;
      background-color: rgba(67,101,181,0.87);
      -webkit-box-shadow: 14px 14px 5px 0px rgba(7,5,130,1);
      -moz-box-shadow: 14px 14px 5px 0px rgba(7,5,130,1);
      box-shadow: 5px 5px 5px 0px rgba(7,5,130,1);
      }
    card_mod:
      class: top-level-card
  - type: weather-forecast
    style: ''
    entity: weather.openweathermap
    card_mod:
      class: inline-card
  - square: false
    columns: 2
    type: grid
    cards:
      - type: custom:garbage-collection-card
        style: |
          ha-card {
          }
        entity: sensor.garbage
        icon_color: grey
        due_color: red
        due_1_color: yellow
        due_txt: true
        hide_date: true
        hide_days: false
        hide_on_click: false
        icon_size: 30px
        card_mod:
          class: inline-card
      - type: custom:garbage-collection-card
        style: |
          ha-card {
          }
        entity: sensor.recycling
        icon_color: green
        due_color: red
        due_1_color: yellow
        due_txt: true
        hide_date: true
        hide_days: false
        hide_on_click: false
        icon_size: 30px
        card_mod:
          class: inline-card
      - type: alarm-panel
        style: |
          ha-card {
            text-align: left;
          }
        states:
          - arm_away
        entity: alarm_control_panel.alexa_guard_da03a
        name: Alexa Guard
        card_mod:
          class: inline-card
      - type: glance
        style: |
          ha-card {
            text-align: center;
          }
        entities:
          - entity: sensor.system_started
            name: Up Time
        title: System Up Time
        show_name: false
        state_color: true
        show_icon: false
        card_mod:
          class: inline-card
    card_mod:
      class: inline-card
  - type: entities
    entities:
      - entity: sensor.last_alexa
        name: 'Last Alexa:'
        icon: hss:no
    show_header_toggle: false
    card_mod:
      class: inline-card
  - type: entities
    entities:
      - entity: input_boolean.garbage_is_out
      - entity: input_boolean.recycling_is_out
      - entity: binary_sensor.recycling_schedules_match
        type: custom:multiple-entity-row
        show_state: false
      - entity: input_boolean.medication_taken
        secondary_info: last-updated
      - entity: sensor.next_holiday
    card_mod:
      class: inline-card
2

I have two dashboards, one for large screened PCs and one for smaller mobile devices.

You can set the default dashboard on the device.

3

Thanks Tom! I was afraid that would be the answer.
There just never seems to be an end to the list of things to do!
:roll_eyes:

4

Don’t use those custom elements. They are sizing your text. Modify the text size based on the screen using the appropriate CSS. It won’t be perfect, but you can make it fit both with 1 dashboard. That’s what I do.

Avoid using the units px when setting things size.

https://www.w3.org/Style/Examples/007/units.en.html

here’s an example button CSS that I use to size text on iOS and desktop:

  name:
  - justify-self: start
  - align-self: end
  - font-weight: bold
  - font-family: Helvetica 
  - font-size: 12px
  - text-align: start
  - background-image: linear-gradient(to right, white 0%, white 80%, rgba(0,0,0,0))
  - -webkit-background-clip: text
  - -webkit-text-fill-color: transparent
  - position: relative
  - display: inline-block
  - width: 100%
  - align-content: start
  - text-align: start
  - text-overflow: unset
  - z-index: 5

This sizes the font to 12 px, and it clips and fades the text so it doesn’t leave the bounds of the current box.

desktop
image

mobile
image

For icons, use percentage so that they stay the same size.