Reply To: Header Text Widget Mobile Responsive CSS

Ok, it took way longer to do this than I originally thought, but I figured out exactly what the issue was.

Here’s what’s happening: As I previously mentioned, the Chrome browser shows the phone text correctly, but as you’ve noticed, the text/phone numbers disappear in the Safari Browser. The reason is because Safari adds hyperlinks to phone numbers automatically on mobile devices (iPhone/Ipad). So when a hyperlink is added to the phone numbers, it uses the styling from your stylesheet and is treated just like a regular link…..and in your case since you’re using the Orange Color Scheme it displays the Phone Text as Orange since that is your default link color. Your header background is also Orange and that was why it wasn’t showing up, since they blend together.

The code appears like this – <a href="example.com" rel="nofollow">800-241-8980</a>

….when it should just be <strong>800-241-8980</strong>

So I added the following code (in addition) to style the text to appear white (but just for that particular text/section) –

#header .wrap .widget-area .widget_text .textwidget #hdrPhone a {
color: #fff;
}

So everything should be working fine now, I’ve checked on my phone.

Having the phone number as a link could be great for your visitors when using a mobile device since all they have to do is tap the number and it will automatically ask if they want to make the call. However, there are ways to prevent Safari from adding links if that’s what you want to do.