Help Request: Reduce gap between top/bottom of cards

[danupshaw]

Goal

I am building a dashboard for a mobile device and am trying to reduce wasted space between the top and bottom of cards as much as possible. Reducing the card size in the styling options makes the card smaller, but the margins around it increase. They don't technically increase, I think, because these cards appear to sit in an outer container (see picture), that has a fixed height and margin. I haven't been able to find the corresponding CSS element to change the size of these containers or to reduce the margin between these containers.

I found the element to modify that will move the card around inside that container. I can even move it out of the container by changing the margins to negative. That does move it closer to the bottom of the card above. However, as you can see from the picture, the container it sits in remains stationary, and the card below it does not move up with it.

Source Yaml

.bubble-container {
    margin-top: -8px !important;
    margin-bottom: -8px !important;
  }

Which step did you already try?

I have also attempted other elements including bubble-content-container and bubble-wrapper, 
but those are not right. I tried 

ha_card {
  margin: -12px important;
}

Problem

But using maring in Ha_card doesn't work, either. I also tried changing the padding values of .bubble-container, but that doesn't work, either. I've tried theming it, but I was only able to reduce the gap between the sections, not the cards. 🤦‍♂️ I saw a suggestion for putting the cards in a vertical stack or a special modified card or a markdown card, but the instructions weren't sufficiently detailed in each suggestion, and I couldn't follow how to do that exactly.

I am not sure what the problem is other than my own lack of experience and education about how to modify the elements. I believe I have scoured this repository and the rest of the internet, but at have come up short. I apologize if I am missing this answer elsewhere. But unless I missed something in my search, or there is a query I didn't think of, I don't believe the answer exists out there.

I would be super grateful if someone would help me with this. Thank you!
Dan

Read the documentation

• I have read the documentation

[Clooos]

Hi! This gap is defined by the Home Assistant's theme and not by Bubble Card, I don't remember its variable name but you can change that in your theme file.

I can't help you more, I'm closing this 🙂

[danupshaw]

Thank you! That is definitely helpful information! Glad to know I was on the right track. Would you mind leraving this issue open for a little bit in case someone from the community might know what the variable name is? Thanks again!

…

On Fri, Mar 21, 2025 at 8:09 AM Cloos ***@***.***> wrote: Hi! This gap is defined by the Home Assistant's theme and not by Bubble Card, I don't remember its variable name but you can change that in your theme file. I can't help you more, I'm closing this 🙂 — Reply to this email directly, view it on GitHub <#1356 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOAD37JFH45A62V5D2L2VP6N3AVCNFSM6AAAAABZPHNFTKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJXGY3DMNY> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Clooos]

I found it, in a section view it's ha-section-grid-row-gap.

In a masonry view: masonry-view-card-margin.

[danupshaw]

This is amazing! You are my favorite human at the moment! Thank you!!

…

On Fri, Mar 21, 2025 at 8:38 AM Cloos ***@***.***> wrote: I found it, in a section view it's ha-section-grid-row-gap. In a masonry view: masonry-view-card-margin. — Reply to this email directly, view it on GitHub <#1356 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE3LUOCZEQ34AD4Z6ZY6IXD2VQB4VAVCNFSM6AAAAABZPHNFTKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTENJXGY4TQOI> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Clooos]

Haha, you're welcome!