Lovelace card locationard

[Smokey]

I have found out how to do this,

I didnt know you could use Card mod as a type of card.

type: custom:mod-card
card_mod:
  style: |
    @media (min-width:100px) {
      ha-card {
        background: black;
        border-radius: 100px;
        position: fixed;
        bottom: 10px;
        z-index: 1;
        left: 10px;
        width: calc(100% - 20px);
        pading: 20px;
      }
    }
card:
  type: custom:swipe-card

This will create a bar across the bottom of the page ready for the slider card to be setup and other cards to be added.

Hope this helps someone

[LiQuid_cOOled]

You can use in a theme too. It’s an awesome feature!

My Theme:
  card-mod-theme: My Theme
  card-mod-card: |
...

  card-mod-row-yaml: |
    "*:first-child$": |

[michaelkrtikos (Michail Kritikos)]

Why when i place a button in the space created it takes also 100% of the screen height?

Can you post an example with some cards already in the swipe?

Thanks

[michaelkrtikos (Michail Kritikos)]

I found it!

Made a few changes as well and i also used a conditional card for it to appear only when the dashboard loads from mobile. Opposite, i applied conditional card to my navigation menu in order to appear only when the dashboard loads from a desktop computer. A few screenshots:

On desktop:

Here the Navigation menu appears on the left column because it’s loaded from a computer.

On Mobile:

Here the navigation menu is hidden and instead, the custom mod card appears at the bottom of the screen with mushroom chips for navigation.

Here is the code:

type: conditional
conditions:
  - condition: screen
    media_query: '(min-width: 0px) and (max-width: 1023px)'
card:
  type: custom:mod-card
  card_mod:
    style: |
      @media (min-width:100px) {
        ha-card {
          background: black;
          border-radius: 0px;
          position: fixed;
          bottom: 0px;
          z-index: 1;
          left: 0px;
          width: 100%;
          pading: 20px;
        }
      }
  card:
    type: custom:mushroom-chips-card
    chips:
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:account
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:sofa
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:fish
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:table-furniture
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:door-sliding
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:bed-double
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:human-male-boy
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:human-female-girl
      - type: action
        tap_action:
          action: navigate
          navigation_path: #your path
        icon: mdi:toilet
    alignment: center

Hope it helps someone!