Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #216896

    Dear Support,

    for my website I put my phone-number in the header area.
    Via CSS I changed the color into white. This works fine on my laptop, but not on iPhone/iPad.
    On iPad/iPhone the text “Telefon” is white, but not the numbers. What’ s the reason for this strange phenomenon?
    What I found out is, if I change the numbers to text, it works as it should do.

    How can I change this?

    This is my CSS-code (Quick-CSS)
    .header_color .phone-info {
    color: #ffffff !important;

    Thank you very much for your help.

    Kindest regards,



    Hi klabuz!

    Please use this:

    .social_header .phone-info span {
    color: white;



    Hi Ismael,

    thanks for your help
    I just tried it. Unfortunately it doesn`t resolve the problem.





    Please try adding following code to Quick CSS as well

    .responsive.social_header .phone-info span { color: white!important; }

    then flush browser cache and refresh your page a few times

    Best regards,


    Thanks, Yigit,

    I tried it. But it still doesn’t work.
    My theory is, that the problem results from the fact, that iOS-devices recognize certain numbers as phone-numbers and treat them separately from the text as a kind of links. These have perhaps their own CSS-rules, which overwrite the ENFOLD-rules.

    If this was true, I would need some browser-sniffer-rule. What do you think?

    Kindest regards,




    In the past some other users also asked for it and i do not remember such issue. Can you try adding following code to Quick CSS as well

    #top .header_color input[type='number'], #top .header_color input[type='tel'] { color: white!important; }

    Best regards,


    Hi Yigit,

    I am so sorry, but it doesn’t work, not even on the laptop.
    None of the below mentiones codes-snippets has any influence on the color.

    Neither this way:
    #top .header_color input[type=’number’],
    #top .header_color input[type=’tel’] { color: white!important; }

    nor this way:
    #top .header_color { color: white !important; }

    nor that way
    .responsive.social_header .phone-info span
    input [type=”number”] { color: white !important; }




    Can you try following too please

    @media only screen and (max-width: 480px) {
    #top .header_color .input-text, #top .header_color input[type='text'], #top .header_color input[type='input'], #top .header_color input[type='password'], #top .header_color input[type='email'], #top .header_color input[type='number'], #top .header_color input[type='url'], #top .header_color input[type='tel'], #top .header_color input[type='search'], #top .header_color textarea, #top .header_color select { color: white!important; }

    Please flush browser cache on your mobile device after applying the code. I will be checking your website on my iphone as well

    Best regards,


    Hi Yigit,

    thanks again.

    I am desperate. It doesn’t work. (At the beginning of your code was one superfluous curly bracket, which I removed. But that didn’t change the situation.)

    I would be really happy to get this problem solved.

    Thanks again for your support,



    Hi, me again,

    do you think this CSS-selector could work: .header_color .phone-info a ?
    I will try it tomorrow. Now I have to go to bed.

    Thanks again,




    Are you removing the codes from Quick CSS section after trying? Please try and let us know!



    Hi Yigit,

    GOT IT !! My yesterday’s idea worked.

    Best regards,


    Here’s my complete Quick-CSS-Code:

    h4.iconlist_title {
    color: #808080;
    font-size: 16px;

    .iconbox_content {
    min-height: 220px;

    /*iOS-Geräte interpretieren die Zahlen im phone-info als Link! */
    .header_color .phone-info, .header_color .phone-info a {
    color: white !important;

    .header_color .social_bookmarks a {
    color: #000000;

    body {
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    .main_color .avia-icon-list .iconlist_icon {
    background-color: #0045b5;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 16px; /*Größe des Zeichens im Kreis*/

    .avia-icon-list .iconlist-timeline {
    left: 21px;


    Hey Klaus!

    Glad your idea worked! Let us know if you have any other questions or issues :)


Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘font-color of phone-info is only partially applied on iPad/iPhone’ is closed to new replies.