# CSS required to make the email address smaller

**URL:** <https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881>\
**Category:** Ask for Help\
**Created:** [July 9, 2021, 6:57am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881 "2021-07-09T06:57:34Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 6:57am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/1 "2021-07-09T06:57:35Z")

</div>

Can one of you wonderfully cleaver coders please work out the code to make the email address appear smaller

 ![Screenshot 2021-07-09 at 08.56.04](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/8/1/81798ccaa0a61a622743f219186aef3cde865f8e.png)

Thanks

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [July 9, 2021, 7:12am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/2 "2021-07-09T07:12:09Z")

</div>

Hello, @baremeter  
Here is a little CSS to change the size of Email.

Change the value 0.8 to your own size (the default is 1.0rem)

~~

```auto

<pre><span><style>

#list-item-lf-Email {
font-size: 0.8rem !important;
}

</style></span></pre>

```

~~

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/f/5f528981d913f1664a011bc0766d42a94518ad55.jpeg)  

**EDIT :::::::::::**  
Here is another version:  
The name of the tag is dependent on the title associated with the component!  
(I think it’s new, well I never paid attention ;-))

In my example the title is “Mon Email” so the tag name is [id = “list-item-lf-Mon Email”]. This helps to differentiate the components.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/7/77518e63bd18ce988ffb99bcc6157238f9b9f4c4.jpeg)

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 7:33am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/3 "2021-07-09T07:33:43Z")

</div>

Hi  
not made any difference in mine - I have added your script to the bottom of other script but it has not changed the email address text

 ![Screenshot 2021-07-09 at 09.30.11](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/4/9478d31d8a4fa5b4edbd663aa3bb8588ff66cfea.jpeg)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [July 9, 2021, 7:37am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/4 "2021-07-09T07:37:32Z")

</div>

Agrrrrrrr

1. correct this line:

color: black;

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/4/0420ee76ebccaa63c0000702ef1c4c0d43d32c14.png)

1. What type of component do you use for Email?

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 7:47am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/6 "2021-07-09T07:47:24Z")

</div>

email button  
 ![Screenshot 2021-07-09 at 09.46.51](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/f/1fb353e86901cb2794ca6330fe5e7d3940ea88b2.png)

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [July 9, 2021, 7:50am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/7 "2021-07-09T07:50:06Z")

</div>

Ah yes, no sorry.

the name of the tag depends on the title of the component.  
In my example the title is “Email”, so the tag is # list-item-lf-Email

I have to look for something else, because it’s not practical !!!

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 7:51am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/8 "2021-07-09T07:51:03Z")

</div>

Ok - thanks

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [July 9, 2021, 8:34am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/9 "2021-07-09T08:34:05Z")

</div>

The problem in your example is that you are not using a title !!!  
I don’t have a perfect solution ☹  
but I have three solutions

1. You add a title and you can use the trick here  
[CCS required to make the email address smaller - #2 by Manu.n](https://community.glideapps.com/t/ccs-required-to-make-the-email-address-smaller/28881/2)

2. you change the size of all “Action text”, “E-mail”, “Phone”, “Link”  

```auto
<pre><span><style>
[data-test="list-item-title"] {
font-size: 0.8rem !important;
}
</style></span></pre>

```

1. you only target the component that interests you.  
But this may not work anymore if you use the “Visibility” parameter for certain component.  
But you have to adjust the parameter: nth-child (2)  
in my example the target component is the 2nd

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/d/bde328b84c93b4a64721e8759357a247dbb1ea3a.jpeg)

```auto
<pre><span><style>

/* Email (2nd component) */
div[id*='screenScrollView'] > div > :nth-child(2) [data-test="list-item-title"] {
font-size: 0.8rem !important;
}
</style></span></pre>

```

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 8:39am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/10 "2021-07-09T08:39:34Z")

</div>

Ah  
so I put in a title and then the email address is now sizeable…  
Thanks

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 8:41am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/11 "2021-07-09T08:41:18Z")

</div>

BUT the title has to be the word “Email” and nothing else ie “email me” does not work!

---

<div class="post-metadata">

**Author:** ![Manu.n](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu.n/32/11679_2.png) [@Manu.n](https://community.glideapps.com/u/Manu.n)\
**Post date:** [July 9, 2021, 8:48am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/12 "2021-07-09T08:48:09Z")

</div>

> [@baremeter](#):
>
> m’envoyer un courriel

Yes, of course

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/0/10056224a1508b357272bdddf437bc4ac172b836.jpeg)

you can remove the line background: yellow;

---

<div class="post-metadata">

**Author:** ![baremeter](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/baremeter/32/28090_2.png) [@baremeter](https://community.glideapps.com/u/baremeter)\
**Post date:** [July 9, 2021, 9:27am UTC](https://community.glideapps.com/t/css-required-to-make-the-email-address-smaller/28881/13 "2021-07-09T09:27:32Z")

</div>

Ah - OK - I get it now - thanks