-
AuthorPosts
-
January 30, 2014 at 11:06 am #216896
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 #216928Hi klabuz!
Please use this:
.social_header .phone-info span { color: white; }
Cheers!
IsmaelJanuary 30, 2014 at 1:48 pm #216936Hi 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 #216984Hey!
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,
YigitJanuary 30, 2014 at 4:28 pm #216996Thanks, 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 #217015Hi!
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,
YigitJanuary 30, 2014 at 5:22 pm #217049Hi 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,
KlausJanuary 30, 2014 at 9:35 pm #217154Hey!
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,
YigitJanuary 30, 2014 at 11:07 pm #217206Hi 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 #217213Hi, 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 #217215Hi!
Are you removing the codes from Quick CSS section after trying? Please try and let us know!
Regards,
YigitJanuary 31, 2014 at 11:07 am #217370Hi 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 -
AuthorPosts
- The topic ‘font-color of phone-info is only partially applied on iPad/iPhone’ is closed to new replies.