# CSS to increase font size of entry components?

**URL:** <https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862>\
**Category:** Ask for Help\
**Created:** [January 29, 2022, 3:47pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862 "2022-01-29T15:47:07Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [January 29, 2022, 3:47pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/1 "2022-01-29T15:47:07Z")

</div>

Hi I have as use case which would be nice with some CSS text wizardry…

- customer is using an app to put in their details (a code, a name) BUT they are older and have trouble looking at smaller fonts

So I would like to get some CSS for the text entry component (and similar) to make them appear bigger.

Any ideas? Thanks!

---

<div class="post-metadata">

**Author:** ![kyleheney](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/kyleheney/32/41173_2.png) [@kyleheney](https://community.glideapps.com/u/kyleheney)\
**Post date:** [January 29, 2022, 4:09pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/2 "2022-01-29T16:09:37Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [January 29, 2022, 4:22pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/3 "2022-01-29T16:22:41Z")

</div>

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 🙂 🙂

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [January 29, 2022, 6:15pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/4 "2022-01-29T18:15:08Z")

</div>

Is this the only text entry you have on the screen?  
In this case you can use this:

```auto
<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.

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [January 29, 2022, 7:26pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/5 "2022-01-29T19:26:13Z")

</div>

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!

```auto
<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>

```

 ![Screenshot 2022-01-29 at 20.24.22](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/3/b326264f0fa02f683d436dbfb2aba301423e7d20.png)

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [January 29, 2022, 8:43pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/6 "2022-01-29T20:43:31Z")

</div>

I think you mean “higher”…?  
In this case, try this:

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Mark\_Turrell](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/mark_turrell/32/26605_2.png) [@Mark\_Turrell](https://community.glideapps.com/u/Mark_Turrell)\
**Post date:** [January 30, 2022, 9:10am UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/7 "2022-01-30T09:10:43Z")

</div>

> [@Roldy](#):
>
> ```auto
> <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 🙂 🙂

 ![Screenshot 2022-01-30 at 10.09.37](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/b/db4cfe030d43b9d65406066b375cbddf2a545869.jpeg)

---

<div class="post-metadata">

**Author:** ![Roldy](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/roldy/32/36068_2.png) [@Roldy](https://community.glideapps.com/u/Roldy)\
**Post date:** [January 30, 2022, 4:59pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/8 "2022-01-30T16:59:11Z")

</div>

Add !important to font-weight

```auto
font-weight: bold !important;

```

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [January 31, 2022, 4:59pm UTC](https://community.glideapps.com/t/css-to-increase-font-size-of-entry-components/37862/9 "2022-01-31T16:59:19Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.