CSS required to make the email address smaller

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


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)


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


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.

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


  1. correct this line:

color: black;

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

email button
Screenshot 2021-07-09 at 09.46.51

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

Ok - thanks

The problem in your example is that you are not using a title !!!
I don’t have a perfect solution :frowning:
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”

[data-test="list-item-title"] {
font-size: 0.8rem !important;
  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


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

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

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

Yes, of course

you can remove the line background: yellow;

Ah - OK - I get it now - thanks

1 Like