How to remove space between lovelace cards?

Configuration Frontend
1

Hey there,

I got stuck in removing spaces between different cards in a lovelace view.

outtake
outtake875×211 15.8 KB

I have used the following structure to archive what I got:

title: Our Home
cch:
  notifications: show
  options: show
  disable_sidebar: true
  voice: hide
  swipe: true
  swipe-animate: fade
  swipe_wrap: false
style:
  padding-top: 0px
  padding-bottom: 0px
views:
  - title: Home
    icon: 'mdi:home'
    path: home
    panel: true
    cards:
      - type: 'custom:layout-card'
        layout: horizontal
        style: null
        column_num: 1
        max_columns: 1
        max_width:
          - 100%
        cards:
          - type: horizontal-stack
            cards:
              - type: picture-elements
                image: /local/images/backgrounds/allgemein/top_section.svg
                elements:
                  - type: state-label
                    entity: sensor.today_clock
                    style:
                      top: 4%
                      left: 1%
                      transform: none
                      color: '#FFFFFF'
                      font-family: Quicksand
                      font-size: 18px
          - type: horizontal-stack
            cards:
              - type: picture-elements
                image: /local/images/backgrounds/main/main_section.svg
                view_layout: horizontal
                elements:
                  - type: conditional
                    card_mod: null
                    conditions:
                      - entity: weather.dwd_weather_iserlohn_roden
                        state: clear-day
                    elements:
                      - type: image
                        image: /local/images/assets/weather/clear-day.svg
                        style:
                          top: 24%
                          left: 12%
                          width: 15%
                          pointer-events: none                 
          - type: horizontal-stack
            cards:
              - type: picture-elements
                image: /local/images/backgrounds/allgemein/bottom_section.svg
                view_layout: horizontal
                elements:
                  - type: image
                    entity: device_tracker.marcs_note
                    image: /local/images/assets/person/marc_away.svg
                    state_image:
                      home: /local/images/assets/person/marc_home.svg
                      not_home: /local/images/assets/person/marc_away.svg
                    style:
                      top: 37%
                      left: 12%
                      width: 8%
                  - type: state-label
                    entity: device_tracker.marcs_note
                    style:
                      top: 82%
                      left: 12%
                      color: '#A1A1A1'
                      font-family: Quicksand
                      font-size: 100%
        layout_type: vertical
        layout_options:
          max_width: 100%
        view_layout: horizontal

I am not realy good in working with css and tried a lot things.

I am using:

  • card-tools
  • card-mod
  • layout-card
  • theme-maker

Please give me some hints or solutions.

Thank you very much :wink:

Greetings Marc

2

Did you ever find a way to do it? This should be so simple…

3

CSS boxes have both padding and margin. Without an actual line for the box, it’s sometimes hard to tell which one will have the effect you want. I’d suggest trying margin-top and margin-bottom as well as padding-top and padding-bottom.