Hi I have as use case which would be nice with some CSS text wizardry…
So I would like to get some CSS for the text entry component (and similar) to make them appear bigger.
Any ideas? Thanks!
I think the user’s device should have its own accessibility features that would enhance the size of these sorts of elements without affecting all other users.
That would make all elements larger, rather than specific ones. I have an extra desire … to have a 3 digit code put into the app in a nice big font… a related desire 
Is this the only text entry you have on the screen?
In this case you can use this:
<pre><span><style>
[data-test="app-tf-text-input"] {
color: red !important;
font-size: x-large !important;
}
</style></span></pre>
I added a touch of color too… change property as you need.
I am getting close — now I would like to make the box for text entry larger (as characters with a tail do not appear fully). Any extra ideas? and thanks already!
<pre><span><style>
[data-test="app-tf-text-input"] {
color: black !important;
font-size: 1.6em !important;
font-weight: 900;
text-align: center
}
/* Choice 1 (1st component) */
div[id*='screenScrollView'] > div > :nth-child(4) {
display:fixed;
margin-left: 0px;
width:160px;
text-align: center;
}
/* Choice 2 */
div[id*='screenScrollView'] > div > :nth-child(5) {
display:fixed;
margin-left: 0px;
width:120px;
text-align: center;
margin-top:-80px;
margin-left:160px;
}
</style></span></pre>
I think you mean “higher”…?
In this case, try this:
<pre><span><style>
[data-test="app-tf-text-input"] {
font-size: xxx-large !important;
line-height: 48px !important;
}
[data-test="app-text-field"] .input-wrap {
height: 80px;
}
</style></span></pre>
Excellent - thanks, @Roldy ! Now my last thing… I am struggling to make the text a thick bold (I try but the text does not change). I can live with what I have though - thank you
Add !important to font-weight
font-weight: bold !important;