Setting a width of an element depending on screen width

Configuration Frontend
1

I’d like to set a width in card_mod depending on the screen width (or browser width)

I can read the needed value in e.g. a button-card.
Depending on the “document.documentElement.clientWidth” , I can return the needed value:

      - type: custom:button-card
        entity: cover.roof_top
        layout: name_state
        size: 100%
        show_name: true
        show_icon: false
        name: |
          [[[
            var v = document.documentElement.clientWidth;
            if (v > 1000)
              v = 150
            else
              v = 75
            return v;
          ]]]

However here it is only the name which is set. I would like to use this value in the following card:

      - type: custom:shutter-card
        title: ''
        entities:
          - entity: cover.roof_top
            name: Roof Top shutter
            buttons_position: bottom
            title_position: bottom
        card_mod:
          style:
            .: |
              ha-card .sc-shutter-selector-picture {
                width: 
                  {% if states('input_number.anynumber') | int > 20 %}
                    150px
                  {% else %}
                    75px
                  {% endif %} !important;
              }

Instead of the “states(‘input_number.anynumber’)”, I’d like to use the “document.documentElement.clientWidth”.

Is this in any way possible?

Thanks for any hints!

2

No one out there?

3

The top example uses javascript templates, as it should in the front end. In the second example you use jinja templates. these won’t work in the front end, but are evaluated in yaml. So though I do not know if you can use templates here, I do know they should be javascript templates, not jinja templates.

4

Both are working so far but not with the values I like to use…
How would javascript look like in card_mod?

5

Don’t know what to tell you. Javascript looks like javascript, Jinja like jinja. They are two different languages. Look at your own two examples to see the difference. You cannot use document.documentElement.clientWidth in a jinja template, because that is javascript.

6

As far as I know you can use javascript to change css but you cannot use javascript inside css. So I doubt it can be done.

7

What do you want to achieve?
Show a current picture and what you wish to get.