CSS required to make the email address smaller

[baremeter]

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

Thanks

[Manu.n]

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)

<pre><span><style>

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

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

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.

[baremeter]

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

[Manu.n]

Agrrrrrrr

1. correct this line:

color: black;

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

[baremeter]

email button

[Manu.n]

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

[baremeter]

Ok - thanks

[Manu.n]

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

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

   

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

3. 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

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

[baremeter]

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

[baremeter]

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

[Manu.n]

@baremeter

m’envoyer un courriel

Yes, of course

you can remove the line background: yellow;

[baremeter]

Ah - OK - I get it now - thanks