Lovelace for different screens

Feature Requests
1

I came across a thread about having Lovelace in different screens and I want to give mine a responsive design. Here’s an example of what I have:

title: Grayson's Living Area
resources:
- url: /local/entity-attributes-card.js?v=2
  type: js
- url: /local/mini-media-player-bundle.js?v=0.9.2
  type: module
views:
- id: home
  title: Home
  theme: PmxMononight
  panel: true
  cards:
  - id: panelhome
    type: vertical-stack
    cards:
    - id: ataglance
      type: vertical-stack
      cards:
      - type: markdown
        content: >
          # At a Glance
      - type: horizontal-stack
        cards:
        - type: glance
          entities:
          - sun.sun
        - type: entities
          entities:
          - sensor.date
          - sensor.time
        - type: glance
          entities:
          - sensor.moon
    - id: panelhomerowtwo
      type: horizontal-stack
      cards:
      - id: livingroom
        type: vertical-stack
        cards:
        - type: markdown
          content: >
            # Living Room
        - type: vertical-stack
          cards:
          - type: light
            entity: light.lr_flamps
          - type: entities
            title: Home Theater
            entities:
            - type: custom:mini-media-player
              entity: media_player.home_theater_receiver
...
          - type: horizontal-stack
            cards:
            - type: entity-button
              entity: script.sr5008_source_computer1
...
            - type: entity-button
              entity: script.sr5008_source_androidtv
...
            - type: entity-button
              entity: script.sr5008_source_server
...
      - id: bedroom
        type: vertical-stack
        cards:
        - type: markdown
          content: >
            # Bedroom
        - type: light
          entity: light.br_tlamps
      - id: kitchen
        type: vertical-stack
        cards:
        - type: markdown
          content: >
            # Kitchen
        - type: entities
          entities:
          - switch.teamaker
          - sensor.graysonteamaker_status

Screenshot:

homeassistant_lovelacedesktop
homeassistant_lovelacedesktop1920×1080 80.7 KB

(I noticed the “Server” button does not align with “Android TV” and “Computer 1” button, but I digressed.)

While looking at “Your topic is similar to,” I came across this thread:

and saw “set different Lovelace file.” I do want Home Assistant to detect if I’m using a mobile device by virtue of css’s max-width media property, so that Home Assistant can reload the page with a different file or maybe provide a different set of views with different tabs.

Perhaps let the “view” be the entire page and let “tab” be the tab for the view. Maybe such as this:

title: Grayson's Living Area
resources:
- url: /local/entity-attributes-card.js?v=2
  type: js
- url: /local/mini-media-player-bundle.js?v=0.9.2
  type: module
views:
- id: home_large
  title: Home
  theme: PmxMononight
  panel: true
  tab:
    cards:
      ...
  tab:
    cards:
    ...
views:
  max-width: 600px
  tab:
    cards:
    ...
  tab:
    ...

I know this sounds like I am duplicating the content of the cards, but my point is, I can eliminate the horizontal stack if I specify the maximum width so that the content can be dynamically moved to fit the width of the browser window when narrowed or in this case, for the mobile devices.

My only solution will be to make most of the cards be in their own row, but for a larger screen, that won’t look pretty, although that’s subjective.

2 
- id: panelhomerowtwo
  type: horizontal-stack
  cards:
  - id: livingroom
    type: vertical-stack
    cards:
    - type: markdown
      content: >
        # Living Room
    - type: vertical-stack

what does this do? how does one learn the different types of stacking and coordinating in lovelace

3

Lovelace has two different stacks: vertical stack and horizontal stack.

Vertical stack stacks the cards vertically in the same column. Horizontal stack groups the cards into different columns in the same row. Stacks are essentially one-dimensional layout similar to flexbox in CSS.

However, unlike the flexbox as demonstrated in the Mozilla Developer page, the stack does not wrap and there’s no way to specify the size of the card if I am correct about this.

To do the same example as in the wrapping of flexbox, you’ll need a single vertical stack and two horizontal stacks. One horizontal stack for three cards and one horizontal stack for two cards.