search

thomasloven / lovelace-layout-card

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

Cards not responsive #266

Open alanmilinovic opened 6 months ago

alanmilinovic commented 6 months ago

If I use out of the box vertical-stack cards for my 3 cards. I have them nice in 3 columns (every card in one column) on a big screen. When using small screen like my mobile phone then all 3 cards are in one column.

Now, when I tried to use this custom layout-card everything is in one column all the time. With grid layout-card, I can get 3 columns but they are then fixed. How to have 3 columns on a big screen and one on a small. Also if I use tablet where screen is somewhere in the middle, then I should have cards in 2 columns.

Basically, I am missing a responsive design what you normally have with vertical-stack cards.

Responsive cards (vertical-stack used):

views:
    title: Home
    cards:
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
      - type: vertical-stack
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...

Always one column (layout-card vertical used):

views:
    title: Home
    cards:
      - type: custom:layout-card
        layout_type: custom:vertical-layout
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
      - type: custom:layout-card
        layout_type: custom:vertical-layout
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
      - type: custom:layout-card
        layout_type: custom:vertical-layout
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...

Always 3 columns (layout-card grid used):

views:
    title: Home
    type: custom:grid-layout
    layout:
      grid-template-columns: 35% 35% 35%
    cards:
      - type: custom:layout-card
        layout_type: custom:vertical-layout
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
      - type: custom:layout-card
        layout_type: custom:vertical-layout
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
      - type: custom:layout-card
        layout_type: custom:vertical-layout
        cards:
          - type: custom:vertical-stack-in-card
            cards:
              ...
B48D81EFCC commented 3 months ago

I was surprised as well, that just the vertical layout card is not responsive.