Lovelace Diferente no celular / PC

Dashboard
#1

Boa tarde amigos, alguém sabe pq minha view no computador fica toda desconfigurada porem no celular aparece normalmente.

Vou postar as duas prints.

Estou usando lovelace.yaml

Screenshot_2021-03-02-17-12-04-445_io.homeassistant.companion.android
Screenshot_2021-03-02-17-12-04-445_io.homeassistant.companion.android1080×2340 87.6 KB

Sem título
Sem título1906×912 34.2 KB

#2

É pq ele ajusta de acordo com o tamanho da tela…vc teria q ajeitar isso pela tela do pc. Tá usando type: vertical-stack? Glance? No glance vc coloca a qtd de icones por linha usando columns: 3 (3 colunas por exemplo…)

1 curtida
#3

Estou usando horizontal stack… vou tentar colocar todos os meus horizontal stack dentro de um vertical stack.

#4

coloquei tudo dentro de um vertical stack … deu certo … Muito Obrigado

#5

Você pode fazer o uso de grids usando o custom layout-card. Pode instalar através do HACS.

Exemplo de como configuro aqui.

icon: "mdi:lightbulb"
title: Lights
path: lights
type: custom:layout-card
layout_type: grid
layout:
  grid-template-columns: 33% 33% 33%.   #Divide o grid em 3 colunas em 33% da tela cada
  grid-template-rows: auto
  grid-template-areas: |
    "header header header" # Aqui eu mantenho o header ocupando as três colunas
    "col1 col2 col3" # Aqui cada coluna ocupa os seus 33% 
  mediaquery:
    "(max-width: 600px)":   # Com o mediaquery eu configuro para em disps mobile cada coluna fica uma abaixo da outroa
      grid-template-columns: 100%
      grid-template-areas: |
        "header"
        "mobile"
        "col1"
        "col2"
        "col3"
cards:

Você Seta o conteúdo de cada coluna com as linhas abaixo. Elas ficam abaixo do conteudo

view_layout:
grid-area: header

Exemplo:

 - type: vertical-stack
   cards:

      - type: "custom:button-card"
        template: custom_card_yagrasdemonde_lights_count
        entity: sensor.lights_on

   view_layout:
     grid-area: col1