Mobile and Desktop Difference

[cataseven]

My Home Assistant version: 0.XX.X

My lovelace configuration method (GUI or yaml):

What I am doing: If use below code then (for example) font color on desktop browser is white, but on mobile phone it is black.

                style: |
                      ha-card {
                        --map-card-room-label-color: rgb(255, 255, 255);
                        --map-card-room-label-color-selected: rgb(255, 255, 255);
                        --map-card-room-icon-wrapper-size: 18px;
                        --map-card-room-icon-size: 14px;
                      }

If use below code then (for example) font color on both desktop and mobile phone is black.

            card_mode:
                style: |
                      ha-card {
                        --map-card-room-label-color: rgb(255, 255, 255);
                        --map-card-room-label-color-selected: rgb(255, 255, 255);
                        --map-card-room-icon-wrapper-size: 18px;
                        --map-card-room-icon-size: 14px;
                      }

What I expected to happen: It should be white What happened instead:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error

# End of code

Error messages from the browser console:

---

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

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

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

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

• [] 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.

[ildar170975]

1 . Read release notes to 3.4.0. The card_mod keyword is mandatory.

2 . You have not specified what frontend card you are trying to style. Also, these "--map-card-xxx" variables seem to be not standard, so it is impossible to guess what you are doing and what is an expected result.

3. In general: if same code causes different behaviour on different devices, this may be caused by: -- different devices may process CSS in diff ways; -- you got different cached versions of card-mod on devices; clear local cache in both devices then.

[pcb1962]

In the second block you have typo - 'card_mode:'