Custom cards won't hide in Adaptive Dashboard

[voicubabiciu]

Hello everyone! I am trying to implement a simple adaptive dashboard using some custom cards and I want some cards to be displayed only on the mobile screen and others on the desktop version. Well, the problem is that some of the cards are still displaying on the dashboard even if I don't use their grid area in the layout. Bellow I attached a part of my code and some screenshots.

---
type: "custom:layout-card"
layout_type: "custom:grid-layout"
layout:
  # Tablet portrait
  grid-template-columns: "1fr 1fr 1fr 1fr 1fr 1fr"
  grid-template-areas: |
    "welcome welcome welcome welcome welcome welcome"
    ". . . hdd-1-temp-chart hdd-1-temp-chart hdd-1-temp-chart"
    ". . . hdd-2-temp-chart hdd-2-temp-chart hdd-2-temp-chart"
    ". . . hdd-3-temp-chart hdd-3-temp-chart hdd-3-temp-chart"
    ". . . hdd-4-temp-chart hdd-4-temp-chart hdd-4-temp-chart"
    ". . . hdd-5-temp-chart hdd-5-temp-chart hdd-5-temp-chart"
  mediaquery:
    # Mobile
    "(max-width: 800px)":
      grid-template-columns: "1fr 1fr"
      grid-template-areas: |
        "welcome welcome"
        "hdd-1-temp-summary hdd-2-temp-summary"
        "hdd-3-temp-summary hdd-4-temp-summary"
        "hdd-5-temp-summary hdd-5-temp-summary"   

view_layout:
  grid-area: "main"
cards:
  - view_layout:
      grid-area: "welcome"
    type: "custom:button-card"
    template: "card_title"
    name: "Hello Sir!"

  - view_layout:
      grid-area: "hdd-1-temp-summary"
    type: "custom:button-card"
    template: card_generic_swap
    entity: sensor.truenas_da1

  - view_layout:
      grid-area: "hdd-1-temp-chart"
    type: 'custom:button-card'
    template: card_graph
    entity: sensor.truenas_da1
    variables:
      ulm_card_graph_color: "var(--google-yellow)"
      ulm_card_graph_name: HDD da1 Temperature
      ulm_card_graph_entity: sensor.truenas_da1
      ulm_card_graph_type: fill 

Desktop:

Mobile:

[schumijo]

Hi @voicubabiciu

You need to play with show option :

view_layout:
    show:
      mediaquery: "(min-width: 800px)"

See https://github.com/thomasloven/lovelace-layout-card#card-visibility

[voicubabiciu]

Hi @schumijo Thank you!