Media query doesnt work from example

[arifroni]

My Home Assistant version: 2023.5.4

Layout-card version (FROM BROWSER CONSOLE): 2.4.4

What I am doing: Filter card based on screen width

What I expected to happen: Based on the screen width, specific card will show up in the dashboard

What happened instead: All of them shows up.

Minimal steps to reproduce:

  - type: markdown
    content: |
      This is only shown on screens more than 1300 px wide
    view_layout:
      show:
        mediaquery: "(min-width: 1300px)"
  - type: markdown
    content: |
      This is only shown on screens more than 800 px wide
    view_layout:
      show:
        mediaquery: "(min-width: 800px)"
  - type: markdown
    content: |
      This is only shown on screens less than 400 px wide
    view_layout:
      show:
        mediaquery: "(max-width: 400px)"
  - type: markdown
    content: |
      This is only shown on touch screen devices
    view_layout:
      show:
        mediaquery: "(pointer: coarse)"

In the picture you can even at narrow windows, I get all the cards.

Error messages from the browser console:

---

By putting an X in the boxes ([X]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
• [x] Have made sure I am using the latest version of the plugin.
• [x] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
• [x] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[Munsio]

• Home Assistant version: 2023.6.0
• Layout-card version: 2.4.4

I do have the same problem with "vertical-stacks". When I add the mediaquery code on the "vertical-stack" card itself it is working but on a "sub-card" like "title" it does not.

[dsellers1]

The example code appears to only be a snippet of what it needed to make the mediaquery work. Here's the code that I borrowed from the grid layout example (which has a typo that I already submitted a pull request to fix).

title: Grid layout
type: custom:layout-card
layout_type: custom:grid-layout
layout:
  grid-template-columns: auto 30px 25%
  grid-template-rows: auto
  grid-template-areas: |
    "header header header"
    "main . sidebar"
    "footer footer footer"
cards:
  - type: entities
    entities:
      - entity: light.living_room_lights
    title: '1'
    show_header_toggle: false
    view_layout:
      grid-area: header
  - type: entities
    entities:
      - entity: light.living_room_lights
    title: '2'
    show_header_toggle: false
    view_layout:
      grid-area: footer
  - type: entities
    entities:
      - light.living_room_lights
      - light.living_room_lights
      - light.living_room_lights
    title: '4'
    show_header_toggle: false
    view_layout:
      grid-area: main
  - type: markdown
    title: 3
    content: |
      This is only shown on screens more than 800 px wide
    view_layout:
      grid-area: sidebar
      show:
        mediaquery: '(min-width: 800px)'
  - type: markdown
    title: 3
    content: |
      This is only shown on screens less than 400 px wide
    view_layout:
      grid-area: sidebar
      show:
        mediaquery: '(max-width: 400px)'
  - type: markdown
    title: 3
    content: |
      This is only shown on touch screen devices
    view_layout:
      grid-area: sidebar
      show:
        mediaquery: '(pointer: coarse)'