# Position Scaling Text with Screen Size

**URL:** <https://forum.inductiveautomation.com/t/position-scaling-text-with-screen-size/107798>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 25, 2025, 8:02pm UTC](https://forum.inductiveautomation.com/t/position-scaling-text-with-screen-size/107798 "2025-06-25T20:02:22Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![annikaciul](https://avatars.discourse-cdn.com/v4/letter/a/e9bcb4/32.png) [@annikaciul](https://forum.inductiveautomation.com/u/annikaciul)\
**Post date:** [June 25, 2025, 8:02pm UTC](https://forum.inductiveautomation.com/t/position-scaling-text-with-screen-size/107798/1 "2025-06-25T20:02:22Z")

</div>

I have some text in a label that I want to be able to have move and/or scale with the size of the device screen it is displaying on. The text size being able to change isn't too important, but the location of the text needs to move relative to the container that it's inside of.

The "Peak" and "Total" labels share the AC Current container, but I want them to have a position centered above the Output Time and Charge time containers respectively, scaling with the size of the screen. Currently, they are locked in place inside their container, which is scaling around them.

I attempted to add grow and shrink properties to the position dropdown, but keep getting an error that those terms "aren't defined in the schema".

All three labels are inside a Coordinate container, which is inside a Flex container.

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [June 25, 2025, 8:10pm UTC](https://forum.inductiveautomation.com/t/position-scaling-text-with-screen-size/107798/2 "2025-06-25T20:10:51Z")

</div>

Contents inside a Coordinate Container will adjust to its size when you set its `mode` property to `percent`. Getting the text to resize as its container grows/shrinks can be done using CSS. See this recent post:

> [@Constant Container Aspect Ratio](https://forum.inductiveautomation.com/t/constant-container-aspect-ratio/107573/6):
>
> So I just learned that my example above is doing it the hard way, when I learned about the unique length units available to container queries ([CSS container queries - CSS | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries)). I updated that project I made for you yesterday to demonstrate: [TEST\_2025-06-19\_0914.zip](https://forum.inductiveautomation.com/uploads/short-url/5oVj8vwp22Kv21pdnLWvDsZYVZD.zip) (46.5 KB) The CSS is much simpler: .psc-LabelContainer { container-type: size; container-name: card; font-family: Arial; } @container card (width \>= 0px) and (height \>= 0px) { .psc-Label { font-size: min(15cqw, 22cqh); }…