Help with card spacing

Hi, I am using the anchor-card for setting page anchor links.

The problem is when adding the card, it creates a large spacing in my dashboard. Is there a way to use card-mod to reduce this spacing as much as possible.

If possible, I would like to make the card completely invisible as it is not required to be seen.

Have tried the following YAML.

type: custom:anchor-card
anchor_id: lights
negative_margin: 10
timeout: 200
offset: -5
backout: true
style: |
  ha-card {
    box-shadow: none;
    border: none;
    margin: 0;
  }
  ha-markdown.no-header {
    box-shadow: none;
    padding: 0 0 0 0px;
    border: none;
    margin: 0;
  }

Did you try with

display: none ;

Or

Maybe increasing the negative_margin

negative_margin: Adjusts the card’s top-down margin for visual spacing.

  • Default value: 13.

Thanks, but neither of these worked?

Are these both used with card-mod

style
     display: none ;

and

style
     negative_margin: 13

The fist one only is card mod

style: |
  ha-card {
    display: none;
    box-shadow: none;
    border: none;
    margin: 0;
  }

The second one is a card option you have it set to 10, try to increase the value

Thanks,

Damn, yea that still does not work.

My full YAML.

type: custom:anchor-card
anchor_id: lights
negative_margin: 10
timeout: 200
offset: -5
backout: true
style: |
  ha-card {
    display: none;
    box-shadow: none;
    border: none;
    margin: 0;
  }

Is there a way just to completely hide the card?

can you not change this to

margin: -100;

or what ever the gap is

I also found out that disabling this rule fixes the issue,
Just not sure how to disable the rule on the card using card-mod.

IMG_2037

I am not quite sure what you are trying to accomplish based off your example, but this example mods the two main parts of this card

type: custom:anchor-card
anchor_id: lights
negative_margin: 10
timeout: 200
offset: -5
backout: true
card_mod:
  style: |
    ul { padding: 0px !important;
         margin: 10px;
         }
    li {
       color: red !important;
       background: blue;
       margin: 0px;
       }

Nothing so far is working. What I am trying to accomplish is basically to HIDE the card altogether, as it takes up space on my dashboard and it pushes everything down, all the card is there for is to create an anchor link, ideally, if I could assign the anchor to an existing card like the title, that would be ideal but I cannot do this. Is it its own integration, therefor a new card is required.

Is there a way to somehow override the
--row-height: 66px;
with say
-- row-height: 0px;
using card-mod?

I would be guessing until @LiQuid_cOOled give you the answer.

card_mod:
  style: |
    :host {
      --row-height: 0px !important;
    }
  

Thanks!

But that did not work either.

Try

card_mod:
  style: |
    ul { display: none ;
         }

but… you should be able to anchor any card with position: fixed !important;

Thanks, but this did not work either.

By anchor I mean anchor links right, using the anchor-card.