Tagged: , , , , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 30, 2014 at 11:06 am #216896
    klabuz

    Dear Support,

    for my website http://www.busch-analytics.de 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,

    Klaus

    January 30, 2014 at 1:29 pm #216928
    Ismael

    Hi klabuz!

    Please use this:

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

    Cheers!
    Ismael

    January 30, 2014 at 1:48 pm #216936
    klabuz

    Hi Ismael,

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

    Cheers,

    Klaus

    January 30, 2014 at 4:10 pm #216984
    Yigit

    Hey!

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

    January 30, 2014 at 4:28 pm #216996
    klabuz

    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,

    Klaus

    January 30, 2014 at 4:43 pm #217015
    Yigit

    Hi!

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

    January 30, 2014 at 5:22 pm #217049
    klabuz

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

    Regards,
    Klaus

    January 30, 2014 at 9:35 pm #217154
    Yigit

    Hey!

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

    January 30, 2014 at 11:07 pm #217206
    klabuz

    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,

    Klaus

    January 30, 2014 at 11:19 pm #217213
    klabuz

    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,

    Klaus

    January 30, 2014 at 11:25 pm #217215
    Yigit

    Hi!

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

    Regards,
    Yigit

    January 31, 2014 at 11:07 am #217370
    klabuz

    Hi Yigit,

    GOT IT !! My yesterday’s idea worked.

    Best regards,

    Klaus

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

    January 31, 2014 at 2:24 pm #217432
    Yigit

    Hey Klaus!

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

    Regards,
    Yigit

  • Author
    Posts
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.