CSS Align lost after refresh or spent time.

[colethegamer123]

My Home Assistant version: 2023.11.2

My lovelace configuration method (GUI or yaml): yaml

What I am doing: CSS Align to Center a Logo and a Title of the Card. Im using Card-mod, Vertical-Stack-in-Card

What I expected to happen: Align the logo and title of the card to middle.

What happened instead: Align the logo and the title of the card to middle and after refresh or minutes later it goes back to wrong place.

Good Frontend: As you can see the logo and the title of the card is aligned to the middle

Bad Frontend: As you can see the logo and the title of the card is not aligned

Extra Info: The issue comes on Tablet, IOS Phone and Browser Google Chrome so everywhere on every device I use.

Minimal steps to reproduce: F5 refresh of the page

Short description about the card for easier understanding:

• Im using Vertical-Stack-In-Card to make two card in a same rectangle without borders so it looks one rectangle not two.
• Im using Card-mod for CSS Styling
• The first card is a markdown card, where I add a picture. With Style I make the markdown card transparent and align the title next to the icon also to center and changing Font-size and other font changes. with the 'img' part of the ha-markdown I also put the icon image aligned to center just like the font.
• The second card is a glance card, where I show financial datas, 4 entity in total. with style I also change this card to transparent so now both looks transparent and looks like one.

type: custom:vertical-stack-in-card
cards:
  - type: markdown
    content: >-
      # <img width="70" height="70" src='/local/dashboard/finance.png'/> Pénzügyek
    style:
      .: |
        ha-card {
          background-color: transparent !important;
          box-shadow: none !important;
          }
      ha-markdown:
        $: |
          h1 {
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            letter-spacing: '-0.02em';
            }
          img {
            vertical-align: -25px;
              }
    name: Financial Datas
  - type: glance
    entities:
      - entity: sensor.web_scrape
        name: EUR / HUF
        image: /local/dashboard/eur.png
      - entity: sensor.web_scrape_3
        name: USD / HUF
        image: /local/dashboard/dollar.png
      - entity: sensor.benya
        image: /local/dashboard/benzin95.png
        name: Benzin
      - entity: sensor.meme
        image: /local/dashboard/coin.png
        name: MEME Coin
    theme: Caule Black Gray Glass
    style:
      .: |
        ha-card {
          background-color: transparent !important;
          box-shadow: 2px !important;
        } 
    show_icon: true
    show_name: true
    show_state: true

Error messages from the browser console:

---

By putting an X in the boxes ([]) below, I indicate that I:

• [X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

Thank you Sir!

[colethegamer123]

Is it possible that backslash instead of slash cause the issue? If yes where can I change that? Or you need to change it in your code? Thank you!

[ildar170975]

1. What you posted is a screenshot of several cards - and your code is for 2 cards only. Consider posting either a code related to the screenshot - or a screenshot related to the code.
2. You said that you have issues with an alignment. Consider posting a minimal code with the problem. What I see in the code are a custom stack card and a forecast card - seems to be not related to the problem.
3. The 1st card in the code - does not present on your screenshot (see pt. 1); besides, a Markdown card does not have an “entities” option supported.
4. You specified an alignment twice - in card-mod and in a markdown content itself.
5. There are already present issues here in this Repo related to the Markdown. Suggest to read them, may be you have a similar issue.

[ildar170975]

Check this already present issue: https://github.com/thomasloven/lovelace-card-mod/issues/259 May be it is same that you are observing. But to be sure - you should exclude other possible reasons and provide a more clear and consistent description.

[colethegamer123]

1. What you posted is a screenshot of several cards - and your code is for 2 cards only. Consider posting either a code related to the screenshot - or a screenshot related to the code.
2. You said that you have issues with an alignment. Consider posting a minimal code with the problem. What I see in the code are a custom stack card and a forecast card - seems to be not related to the problem.
3. The 1st card in the code - does not present on your screenshot (see pt. 1); besides, a Markdown card does not have an “entities” option supported.
4. You specified an alignment twice - in card-mod and in a markdown content itself.
5. There are already present issues here in this Repo related to the Markdown. Suggest to read them, may be you have a similar issue.

Hello. Thanks for your fast answer. I edited the whole issue, and made it more specific. I just want to say this is an example now for easier understanding and I wrote also a full description what the parts of the code are doing. The only thing I want to share with you, Its happening with every card, if I use this pattern ( so I use markdown with style, so something will be with the card-mod). I really hope its easily understandable I cannot make this more specific.

I checked the suggested open issue, but as I see, there is no movement since April. Maybe I can help with this issue to make things clear. I also sent a screenshot for you in the first comment of this issue, maybe gives a hint, but you are the professional Im just guessing. Thank you.

If you need anything else please let me now. Thank you.

[ildar170975]

1. Unfortunately, I cannot test your code now, do not have access to HA. There are issues here in Repo (not only mentioned above) related to Markdown. Some of them closed. For example , check my proposed solution in https://github.com/thomasloven/lovelace-card-mod/issues/204.
2. As I can see you are using the Markdown to create headers with images. Alternatively you may add an image by card-mod to any card supported a header.

[colethegamer123]

1. Unfortunately, I cannot test your code now, do not have access to HA. There are issues here in Repo (not only mentioned above) related to Markdown. Some of them closed. For example , check my proposed solution in Markdown + Card mod, very slow/buggy #204.
2. As I can see you are using the Markdown to create headers with images. Alternatively you may add an image by card-mod to any card supported a header.

Thank you. I'll check the issue and also try the alternatives you mentioned.

[colethegamer123]

1. Unfortunately, I cannot test your code now, do not have access to HA. There are issues here in Repo (not only mentioned above) related to Markdown. Some of them closed. For example , check my proposed solution in Markdown + Card mod, very slow/buggy #204.
2. As I can see you are using the Markdown to create headers with images. Alternatively you may add an image by card-mod to any card supported a header.

Thanks mate, the suggested issue was helping a lot.

Looks like that is working, I tested it 1-2 times already and looks good and promising.

Thank you very much :)