Sometimes the dashboard is displayed with only one column

[Torte (Torsten)]

I have actually set 3 columns in the dashboard. But sometimes only one column is displayed. If I then simply press F5 in the browser or in Fully Reload then 3 columns appear as desired. I can not explain this has anyone an idea what I’m doing wrong?

I use the type: custom:masonry-layout

kiosk_mode:
  user_settings:
    - users:
        - dashboard
      hide_header: false
      hide_sidebar: true
      hide_overflow: true
      ignore_entity_settings: true
views:
  - theme: Mushroom Square Shadow
    title: Home
    visible:
      - user: fb08750745144569a997e30d3036b965
      - user: a0974edf194e47218e47b45306353622
    type: custom:masonry-layout
    columns: 3
    layout:
      width: 300
      max_cols: 3
      card_margin: 2px 2px 0px
    badges: []
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: horizontal-stack
                cards:
                  - type: custom:digital-clock
                    dateFormat:
                      weekday: long
                      day: 2-digit
                      month: long
                    timeFormat:
                      hour: 2-digit
                      minute: 2-digit
                    card_mod:
                      style: |
                        ha-card 
                        .first-line {
                        font-size: 6.8em;
           /.../

[Torte (Torsten)]

[oyvhov (Øyvind)]

@Torte

columns: 3

Hi! I’m not sure that columns: 3 will work. What i normally do to force the number of columns is to use is custom:grid-layout. Let me know if you have an questions.

    type: custom:grid-layout  
    layout:
      grid-template-columns: 10px auto auto auto 10px
      grid-template-rows: auto
      grid-template-areas: |
        ". column1 column2 column3 ."
    cards:
      - type: vertical-stack
        cards:
          - type: horizontal-stack
            cards:
              - type: horizontal-stack
                cards:
                  - show_name: true
                    show_icon: true
                    type: button
                    tap_action:
                      action: toggle
                    entity: light.test

        view_layout: # add this to each Stack
          grid-area: column1

[Torte (Torsten)]

hi oyvhov,

Thanks! I switched to a 33% 33% 33% grid layout and it works perfectly.

thank you
Torte

[billkater (William Kater)]

How did you do that?

My fully kiosk has been displaying fine for months. Now all of a sudden it goes from 3 wide to 2 wide.