#Using card-mod to change vertical stack card margins causes unwanted background effects

1 messages · Page 1 of 1 (latest)

upper heart
#

I'm using a Vertical Stack card to contain five cards for weather and moon phase information. My Home Assistant theme is Frosted Glass Theme, installed via HACS. I've added the following code to some of the cards internal to the Vertical Stack to modify vertical spacing between elements:

card_mod:
  style: |
    ha-card {
      border: none;
      box-shadow: none;
      drop-shadow: none;
      background: none;
      margin-top: -30px;
      margin-bottom: -50px;
    }

I don't know much about CSS; I added the border/shadow/background code kind of blindly trying to fix my problem. The preview in the Vertical Stack card configuration doesn't show the problems since it doesn't have the theme background, so it's not very easy to test things in real time. I have arrows pointing to the unwanted effects in the screenshot. You can kind of even see them in the first screenshot!

Any ideas?

image.png
still tinsel
#

Try adjusting the padding like you did the margins. Padding is on the inside; margins are in the outside.
EDIT: I re-read your question. Thought you were having issues with getting stuff moved around. Try setting the background to transparent. I don't think it will matter but it is something to try.
Post your code for the vertical-stack and I can try to mess around with it and see what I can come up with.