search

thomasloven / lovelace-layout-card

🔹 Get more control over the placement of lovelace cards.
MIT License
1.05k stars 125 forks source link

Card Arrangement on Tablet / mobile are wrong #204

Open idominiki opened 2 years ago

idominiki commented 2 years ago

My Home Assistant version: 2022.7.7

What I am doing: I use auto-entities in different parts in my dashboard. E.g. I used it to display lights and waste collection. I also use custom:grid-layout. And there is the problem. On a desktop, everything looks good, but If I look on a mobile device or a Tablet it looks very poor.

What I expected to happen: It should look like this:

as on the desktop:

What happened instead:

The least ammount of code possible to reproduce my error

I have this custom:grid-layout configured: `- type: custom:grid-layout title: _living_room path: 1 square: false layout:

default

  grid-gap: 1px 1px
  grid-template-columns: repeat(4, 1fr)
  grid-template-rows: auto
  grid-template-areas: |
    "  chips  chips  chips  chips  "
    "  t1     t1     t1     t1     "
    "  l1     l1     l1     l1     "
    "  t2     t2     t2     t2     "
    "  k2     k2     k2     k2     "
    "  t3     t3     t3     t3     "
    "  m1     m2     m3     .      "
    "  m4     m5     .      .      "
    "  t4     t4     t4     t4     "
    "  dw1    dw1    dw1    dw1    "
    "  t5     t5     t5     t5     "
    "  b1     b1     b1     b1     "
  mediaquery:
    #phone
    "(max-width: 800px)":
      grid-gap: 1px 1px
      grid-template-columns: repeat(2, 1fr)
      grid-template-areas: |
        "  chips  chips  "
        "  t1     t1     "
        "  l1     l1     "
        "  t2     t2     "
        "  k2     k2     "
        "  t3     t3     "
        "  m1     m2     "
        "  m3     .      "
        "  m4     m5     "
        "  t4     t4     "
        "  dw1    dw1    "
        "  t5     t5     "
        "  b1     b1     "
    #portrait
    "(max-width: 1200px)":
      grid-gap: 1px 1px
      grid-template-columns: repeat(3, 1fr)
      grid-template-areas: |
        "  chips  chips  chips  "
        "  t1     t1     t1     "
        "  l1     l2     l3     "
        "  t2     t2     t2     "
        "  k2     k2     k2     "
        "  t3     t3     t3     "
        "  m1     m2     m3     "
        "  m4     m5     .      "
        "  t4     t4     t4     "
        "  dw1    dw1    dw1    "
        "  t5     t5     t5     "
        "  b1     b1     b1     "`

And this is the displayed section of the lights: `- type: custom:auto-entities card: type: grid

columns: 4

      column_width: 50%
      square: false
    card_param: cards
    filter:
      include:
        - domain: light
          area: wohnzimmer
          options:
            type: custom:button-card
            template: card_light
            variables:
              ulm_card_light_enable_color: true
              ulm_card_light_enable_slider: true
              ulm_card_light_enable_collapse: true
              ulm_card_light_force_background_color: true
              ulm_card_light_enable_popup: true
    view_layout:
      grid-area: l1`

Can anyone help?

Thanks Dominik