# Text on Perspective elements doesn't shrink **URL:** \ **Category:** Ignition\ **Created:** [June 24, 2020, 1:17pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976 "2020-06-24T13:17:33Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![mario.colombo91](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mario.colombo91/32/14148_2.png) [@mario.colombo91](https://forum.inductiveautomation.com/u/mario.colombo91)\ **Post date:** [June 24, 2020, 1:17pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/1 "2020-06-24T13:17:33Z")
Greetings, i have a project with views with all the elements inside without other containers (Only Root); ! [Project | 273x383] (upload: [//bh7FLzFcCGoU2HTcfg7jMZWqML8.png](https://bh7FLzFcCGoU2HTcfg7jMZWqML8.png)) i tried to make this view in “Percent” mode, to make it flexible between screens. The components shrink perfectly from img 1 to img 2 as you can see, but the text stays on the same size. How can i make the text larger or smaller based on page’s size? I have to put the text in another container? There’s a global option that i’m missing? Is it possible to resize live the text format? Thanks a lot for your replies! ![Img2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/950239ea1a1aba0e3772232e14048e87365d00cf.png) ![Project](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/f/4f07723cf5a0fe65ef760b60c994b3f987f3feda.png) ![Img1](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/6/c6bb83b6c424c61a20e94b416a05d504f17c9c87.png) ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 24, 2020, 1:22pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/2 "2020-06-24T13:22:12Z")
I think you will be much happier if you learn the fundamentals of the Flex Container. This is a great place for one, it’s built for exactly what you’re looking for (and will do it better and easier than coordinate percent too) In regards to the sizing, I think you’re looking for a style class with a media query. Or you could try setting your font size in ‘em’ instead of ‘px’, that way it’s relative to its parent containers size. ---
**Author:** ![mario.colombo91](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mario.colombo91/32/14148_2.png) [@mario.colombo91](https://forum.inductiveautomation.com/u/mario.colombo91)\ **Post date:** [June 24, 2020, 2:04pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/3 "2020-06-24T14:04:36Z")
Thank for your response kgamble! I have tried all of yours advice: i can’t switch to Flex because my pages layout use different shapes, and i cannot configurate them on a flex container. The Style class with media query is not working because i need to change live the value of the font, and not to change it at prefixed values. I tried to change the font size value to em, but that is not resizing. It stays exactly like is it. My goal is to maintain the label/component proportion: with this logic i expected that the text highlighted in yellow won’t exceed it’s space, and the text inside the orange label would shrink to stay inside the label without disappear, but it’s not working. Is there a built in feature? ![img4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/4/54bff6c5f1121e732c1d261210fdf1b90c39b959.png) ---
**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\ **Post date:** [June 24, 2020, 2:19pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/4 "2020-06-24T14:19:21Z")
> [@mario.colombo91](#): > > i can’t switch to Flex because my pages layout use different shapes, and i cannot configurate them on a flex container. The solution here is to use nested flex containers, if you take a look at the Adhoc trends page on the Ignition Exchange, it is a really good example of how to do what you’re looking for. > [@mario.colombo91](#): > > The Style class with media query is not working because i need to change live the value of the font, and not to change it at prefixed values. Are you describing making the font smaller when it exceeds the bounds of the box? ---
**Author:** ![mario.colombo91](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mario.colombo91/32/14148_2.png) [@mario.colombo91](https://forum.inductiveautomation.com/u/mario.colombo91)\ **Post date:** [June 24, 2020, 2:34pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/5 "2020-06-24T14:34:13Z")
Yes, i need to make the font smaller so it can stay inside the box (smaller, but with its right proportions) I have created an example, i need to see the top text (e.g. font size 4) when my screen is smaller, and my bottom text (e.g. font size 8) when is bigger. ![img6](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/c/1cecd3e3641d0f3fdca6d2d0139ad54696969715.png) ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [June 24, 2020, 3:40pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/6 "2020-06-24T15:40:32Z")
Resizing text to fit a bounding container is simply not something CSS (and therefore styles in Perspective) can do. The closest option you have is the viewport related units - `vw` and `vh`: [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building\_blocks/Values\_and\_units#Relative\_length\_units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Relative_length_units) ---
**Author:** ![dkylep](https://avatars.discourse-cdn.com/v4/letter/d/6de8d8/32.png) [@dkylep](https://forum.inductiveautomation.com/u/dkylep)\ **Post date:** [June 24, 2020, 6:56pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/7 "2020-06-24T18:56:53Z")
Have you tried SVG text? Create a file on your computer called text.svg and edit with notepad. Add the follwing text to the file… ```auto SVG Text ``` Assuming your view is a coordinate container, drag the file from your computer and drop it on a view in ignition perspective designer. When the ‘Link Image’ windows pops up select the ‘Embed Image’ option. Now you have some svg text in your view. Change the views root property mode to percent. Now if you embed that view somewhere else the svg text will scale. I’m not 100% on the svg code but it’s pretty straightforward to manipulate. New View (coordinate container, mode:percent) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/b/7bc3ca6fa7921e9bf5a913e2471f6ebbc39d09fe.png) Embedded New View within another ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/e/7ef863a6c4c44d2db64d3950a295acd765df83ff.png) ---
**Author:** ![mario.colombo91](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mario.colombo91/32/14148_2.png) [@mario.colombo91](https://forum.inductiveautomation.com/u/mario.colombo91)\ **Post date:** [June 29, 2020, 6:42am UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/8 "2020-06-29T06:42:31Z")
Thanks PGriffith, that worked! I used vmin to keep the format 🙂 ---
**Author:** ![dyates](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dyates/32/20197_2.png) [@dyates](https://forum.inductiveautomation.com/u/dyates)\ **Post date:** [November 26, 2020, 12:08am UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/9 "2020-11-26T00:08:25Z")
How did you apply it in perspective. “fontsize: vmin”? ---
**Author:** ![mario.colombo91](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mario.colombo91/32/14148_2.png) [@mario.colombo91](https://forum.inductiveautomation.com/u/mario.colombo91)\ **Post date:** [November 27, 2020, 7:52am UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/10 "2020-11-27T07:52:00Z")
I applied it in a Style Class, but i guess you can apply it in the component style property: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/9/4921027370d892e908f3a4184251724fd5e7ce81.png) ---
**Author:** ![dyates](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/dyates/32/20197_2.png) [@dyates](https://forum.inductiveautomation.com/u/dyates)\ **Post date:** [November 28, 2020, 2:40am UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/11 "2020-11-28T02:40:55Z")
Great, Thank you for that. I’ll try it to see if it works. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [November 28, 2020, 4:04am UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/12 "2020-11-28T04:04:09Z")
Definitely something for flex containers. As Keith suggested, you should familiarise yourself with the different container types, as how you would do something in Vision is almost guaranteed not how you would do it in Perspective. I use coord containers sparingly, only when absolutely necessary (p&id mimic layouts and device symbol templates). I use mostly flex and column containers for my content and breakpoint containers as the base of my main pages so that I can control how they display in mobile and desktop. Edit: additionally, I would suggest learning some basic CSS as well. Understanding margins and padding would be my first suggestion ---
**Author:** ![j.israelsen](https://avatars.discourse-cdn.com/v4/letter/j/ad7895/32.png) [@j.israelsen](https://forum.inductiveautomation.com/u/j.israelsen)\ **Post date:** [March 5, 2021, 8:12pm UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/13 "2021-03-05T20:12:46Z")
Setting the fontsize to use a derivative of “vmin” (e.g. 5vmin, 1vmin, etc.) works really well. Thanks for this post. ---
**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\ **Post date:** [March 6, 2021, 3:27am UTC](https://forum.inductiveautomation.com/t/text-on-perspective-elements-doesnt-shrink/35976/14 "2021-03-06T03:27:10Z")
Just fyi ![Screenshot_20210306-135552_Chrome](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b9296a79cdf507ca0f8fa8c5f87d08dbd5e4d1d5.jpeg) From here > **[Units in CSS (em, rem, pt, px, vw, vh, vmin, vmax, ex, ch, ...)](https://dev.to/matthias/units-in-css-em-rem-pt-px-vw-vh-vmin-vmax-ex-ch-53l0)** > > CSS knows several measurement units. The best known unit is pixels, but there are other units that ar... Note vmin included in the rarely used section. Best imo to use rem as it relates directly to the root font size Edit 2yrs later: I never use rem anymore 😬, I use `clamp(4pt, calc(0.8*(1.0vmin + 1.0vmax)), 100pt)` Adjust the values `4px`, `0.8`, and `100px` to suit. Edit3: 4 more months later... Note that you should combine this with an 'orientation' media query to handle portrait orientations as well for mobile phone use