Probably because you placed the whole card inside “card-templater” - it redraws an embedded card on every change of monitored entities.
Never used the “card-templater” - but it seems to work like another custom “config-template-card” (CTC) which I am using.
There is one “NEVER” - never place picture-elements (PE) card inside CTC, it will blink on every change of monitored entities (as mentioned above). Instead, place a particular element(s) inside CTC - then only this element will change dynamically. Check CTC github docs how to use CTC with elements.
Next, about using templates.
As far as I can see you need them:
– for “gauge” cards;
– for “state-label” elements: values & position.
There is an alternative way for the “state-label” elements:
– create template sensors & show them instead prefixes;
– define positions dynamically by using CSS variables & card-mod.
You decide yourself which way is easier to implement / test / maintain.
Next, about different screens.
Here I tried to adapt PE card to different viewports, check links in this post.
Check this:
It is possible to position elements properly for every viewport.
The main problem is a size of an element (“scale”). For this you will have to define it dynamically (explained there in my link).
In some cases you may wish to have a different background image for different viewports - like for a normal PC monitor & portrait-oriented smartphone.
Then you will need this approach.