Text not wrapping in card

Hi @micah ,

I have no experience with dynamic calculation of the font size with css, but I think, possibly the calculation need to be more adapted. So far, I know it use some calculation rules like:

 min-font-size min-screen-size
 | |
.myClass1 { | |
 font-size: calc(18px + (24 - 18) * (100vw - 400px) / (800 - 400));
} | |
 | |
 max-font-size - min-font-size max-screen-size - min-screen-size

I tested it a card , textarea, image and label widget - used onother callcuation it did wrap the text. Another point is that for textarea you need also to specify a line number properties - and I thnk it was has an effect there.

I used the css classes from your example with another calculation -where set the class properties of the textarea and card widgets

.instructionCard1 {
 font-family: Montserrat, Century Gothic, sans-serif, -apple-system;
 text-transform: uppercase;
 font-size: calc(16px + 6 * ((100vw - 320px) / 680));
 color: white;
 background-color: rgba(18,18,17,0.3);
 border-top-color: red;
 border-top: 3px;
 border-top-style: solid; 
 overflow: scroll;
}

.twxTextArea1 {
 font-family: Montserrat, Century Gothic, sans-serif, -apple-system;
 background-color: transparent !important;
 display: flex; 
 flex-wrap: wrap;
 font-size: calc(16px + 6 * ((100vw - 320px) / 680));
 line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 320px) / 680));
}

.