How to change phone number color on mobile

Infinity08 · ‎01-15-2018

Hello,

I am using the #7c95ab color as my theme for my website: www.atoley.com. On my home page under Contact Us, I am using that blue background with white text. However, when viewed on the mobile version, the phone number font color changes to the same blue color, thus my customers cannot see my phone numbers via mobile.

Can someone please help direct me on how to change the phone number text color on the mobile version of my website?

Than you,

Blake

Adam7 · ‎01-15-2018

Are you still having trouble with that, @Infinity08? When I check your home page the phone number still uses white on mobile for me.

Infinity08 · ‎01-15-2018

Hi @Adam. Yes I still have the issue. It may only ocurr after you select the phone number to call the business.

Adam7 · ‎01-16-2018

Ok, seems like something odd with mobile safari. Try adding this to Settings > SEO > Header Code and re-publishing:

<style>
	@media screen and (max-width: 767px)
	a:hover, .wsite-com-link:hover .wsite-com-link-text {
	    color: #fff;
	}
</style>

Infinity08 · ‎02-13-2018

Hey @Adam

Sorry for the supler long delay. I applied your code in the header of the SEO Setting section and I did not see any change in Safari. However, the text is white in Chrome.

Thank you,

Blake

Adam7 · ‎02-14-2018

Ok, try this version of the code instead:

<style>
	@media screen and (max-width: 767px)
	a:hover, .wsite-com-link:hover .wsite-com-link-text {
	    color: #fff !important;
	}
</style>

Lycos · ‎04-18-2018

Perfect! Thanks for this little tweak. I was having the same issue on mobile iOS Safari with it turning phone numbers into white-on-white text. This bit of code (and swithing the #fff for my blue #20428a worked perfectly.

I really appreciate the discussion saving me more frustration!

Bernadette3 · ‎04-18-2018

Thanks for letting us know, @Lycos. Adam is super helpful!