Text-Size adjust in smartphone

[fibu-freak (Peter)]

I have a widget which is shown in a correct manner on my PC. But when using a smartphone the text is cut off.

component: oh-label-cell
config:
  actionAnalyzerChartType: isoWeek
  actionGroupPopupItem: gairquality_01
  footer: =items.garbage_problem_place_Title.state.split(",")[2]
  header: =items.garbage_problem_place_Title.state.split(",")[0] + " - " +
    items.garbage_problem_place_Title.state.split(",")[1]
  item: garbage_grat_Begin
  label: =dayjs(items.garbage_problem_place_Begin.state).format('dddd, DD.MM.YY ')
    + " " +
    items.garbage_problem_place_Title.state.split(",")[3].replace("Uhrzeit","Zeit")
  on: "true"
  stateStyle:
    color: red
    fontSize: 21px
  style:
    background: linear-gradient(to top right,#DC143C 0%,#00FFFF 60%)
  trendGradient: blue
  trendItem: aqaleak_01_devtemp

normally the widget looks:

but in my iPad it looks:

Is there a possibility to change the size dynamically?

thx in advance for help.

Cheers - Peter

[JustinG]

True text scaling is, as I understand it, in consideration for the next generation of css, but until then it is actually a little tricky. See here for a brief discussion and some solutions:

Widgets resized?

The typical design philosophy behind web pages is that the text remains at a constant readable level even if the container that text is in changes size; the exact opposite of what you want here. This is why text size has different options (e.g., no % unit) than other size units in CSS. The newest snapshot versions have some recently added code that includes a screen object in the item expressions that will tell you several things including the width of the OH window, but that still doesn’t ge…

[fibu-freak (Peter)]

The expression

  stateStyle:
    color: red
    fontSize: =(device.desktop)?('0.85vw'):('1.5vw')

did the trick. Thx for help and the solution

Cheers - Peter