CSS: Editing the basic parameter of the dashboard

Hello :slight_smile:

How can I change the value of the .column class, specifically the max-width attribute?

.column {
    flex: 1 0 0px;
    max-width: 500px; /* Remove this attribute or increase its value */
    min-width: 0px;
}

Welcome to this loony bin! :laughing:

The short answer is, you don’t! :wink: In HA the dashboards are nothing you could compare with usual dashboards or websites. :slight_smile:

Will say, you have to go into the specific card and set the wanted values there. But you need a custom_component like card-mod for this. You could as well change the themes CSS, but that would break things on a different end, guaranteed! :slight_smile:

I know, that sounds rather difficult, but as I said above, in HA things work quite different.

I can’t exactly see, if you’re already using layout-card, as this would offer an uncomplicated solution. You could set there a pixel width for the grid-column, in pixel as well as in percent. Should work.

Let us know, what you want to do, so we can add more specific instructions to proceed further, if needed. :slight_smile:

Hello again :slight_smile:
I tried solutions like:

  • card-mod
  • lovelace-layout-card

Unfortunately, I was unable to achieve what is shown in the image below.
I only have problems with higher resolutions. The dashboard looks great on the phone.

Changing or deleting this attribute (max-width) causes the dashboard to display correctly on the computer and phone.

Example in the image below with and without attribute (max-width)

Please post the YAML code of that dashboard (I’d prefer the layout-card variant). Then we’ll see how we get there. :slight_smile:

In a nutshell: layout-card is able to set “media queries” for different device widths, so you could easily order the shown cards specifically for mobile or desktop view. And you can set the width for the grid-columns in pixel as well as in percent.

Please post the code formatted, see here #11. It’s important, because in YAML indentation matters very much, and without a proper formatting, these (possibly wrong) indentations get lost. Thanks! :slight_smile:

title: DOM
views:
  - path: default_view
    title: Home
    subview: false
    layout: {}
    badges: []
    cards:
      - square: false
        type: grid
        cards:
          - type: horizontal-stack
            cards:
              - square: false
                type: grid
                cards:
                  - square: false
                    type: grid
                    cards:
                      - type: tile
                        entity: sensor.0x00124b0029192ce1_temperature
                        name: Temp. przód
                        vertical: false
                      - type: tile
                        entity: sensor.0x00124b0029192f88_temperature
                        name: Temp. tył
                        vertical: false
                      - type: tile
                        entity: sensor.0x00124b0029192ce1_humidity
                        name: Wilgotność - przód
                        vertical: false
                      - type: tile
                        entity: sensor.0x00124b0029192f88_humidity
                        name: Wilgotność - tył
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: call-service
                          service: cover.open_cover
                          target:
                            entity_id:
                              - cover.rolety_biuro
                              - cover.rolety_biuro_wyjscie
                              - cover.rolety_garaz
                              - cover.rolety_garderoba
                              - cover.rolety_goscinny
                              - cover.rolety_kuchnia_duze
                              - cover.rolety_kuchnia_mala
                              - cover.rolety_lazienka
                              - cover.rolety_salon_lewa
                              - cover.rolety_salon_prawa
                              - cover.rolety_salon_srodkowa
                              - cover.rolety_salon_wyjscie
                              - cover.rolety_sypialnia_1
                              - cover.rolety_sypialnia_2
                          data: {}
                        name: OTWÓRZ WSZYSTKIE ROLETY
                        icon: mdi:curtains
                        show_state: false
                        hold_action:
                          action: none
                        icon_height: 50px
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: call-service
                          service: cover.close_cover
                          target:
                            entity_id:
                              - cover.rolety_biuro
                              - cover.rolety_biuro_wyjscie
                              - cover.rolety_garaz
                              - cover.rolety_garderoba
                              - cover.rolety_goscinny
                              - cover.rolety_kuchnia_duze
                              - cover.rolety_kuchnia_mala
                              - cover.rolety_lazienka
                              - cover.rolety_salon_lewa
                              - cover.rolety_salon_prawa
                              - cover.rolety_salon_srodkowa
                              - cover.rolety_salon_wyjscie
                              - cover.rolety_sypialnia_1
                              - cover.rolety_sypialnia_2
                          data: {}
                        name: ZAMKNIJ WSZYSTKIE ROLETY
                        icon: mdi:curtains-closed
                        show_state: false
                        hold_action:
                          action: none
                        icon_height: 50px
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: toggle
                        entity: cover.brama_garazowa_door
                        show_state: true
                        name: BRAMA GARAŻOWA
                        hold_action:
                          action: none
                        icon_height: 50px
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: toggle
                        entity: cover.brama_wjazdowa_door
                        name: BRAMA WJAZDOWA
                        show_state: true
                        icon: ''
                        hold_action:
                          action: none
                        icon_height: 50px
                    columns: 2
                  - square: false
                    type: grid
                    cards:
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: toggle
                        entity: switch.0x00124b0026b7d3a8
                        icon_height: 70px
                        name: WEJŚCIE
                        icon: mdi:lightbulb
                        show_state: true
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: toggle
                        entity: switch.0x00124b0024ca76f8
                        name: OGRÓD
                        show_state: true
                        icon: mdi:lightbulb
                        icon_height: 70px
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: toggle
                        entity: switch.0x00124b0026b7f3a2
                        icon: mdi:lightbulb
                        name: TARAS
                        show_state: true
                        icon_height: 70px
                    columns: 3
                  - square: false
                    type: grid
                    cards:
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: more-info
                        entity: binary_sensor.0x00124b002918b9af_contact
                        show_state: true
                        name: WEJŚCIE
                        hold_action:
                          action: none
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: more-info
                        name: FURTKA
                        entity: binary_sensor.0x00124b0029170a89_contact
                        show_state: true
                        hold_action:
                          action: none
                      - show_name: true
                        show_icon: true
                        type: button
                        entity: binary_sensor.0x00124b0029170b44_contact
                        name: BIURO
                        show_state: true
                        tap_action:
                          action: more-info
                        hold_action:
                          action: none
                      - show_name: true
                        show_icon: true
                        type: button
                        tap_action:
                          action: more-info
                        show_state: true
                        name: SALON
                        entity: binary_sensor.salon_ogrodek_contact
                    columns: 4
                columns: 1
        columns: 1
      - type: horizontal-stack
        cards:
          - square: false
            type: grid
            cards:
              - show_state: false
                show_name: false
                camera_view: live
                type: picture-entity
                entity: camera.front_medium
                image: https://demo.home-assistant.io/stub_config/bedroom.png
              - square: false
                type: grid
                cards:
                  - type: entity
                    entity: climate.0xa4c13859acf2f328
                    name: BIURO
                    icon: mdi:thermometer
                    attribute: current_temperature
                    unit: °C
                    state_color: false
                  - type: entity
                    entity: climate.0xa4c13852969aa76c
                    name: KOTŁOWNIA
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c13837640ad98d
                    name: PRZEDPOKÓJ
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c138c693f09ab7
                    name: SALON 1
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c13886a4acc0bb
                    name: SALON 2
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c1383a98c3c780
                    name: GOŚCINNY
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c138448d7c24aa
                    name: GARDEROBA
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c1387425c28659
                    name: KORYTARZ 1
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c138e67d2be8e4
                    name: KORYTARZ 2
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                  - type: entity
                    entity: climate.0xa4c1380ed317a43f
                    name: SYPIALNIA
                    icon: mdi:thermometer
                    unit: °C
                    state_color: true
                    attribute: current_temperature
                columns: 4
            columns: 1