Text colour mobile vs desktop

Support
#1

Hello

I have an issue with the colour of the contact details on my home page.

When I am on the homepage from desktop my landline number appears in white as it should be.

However, when I am browsing from mobile, the landline number is in black, whereas the rest of the text is in white.

I need all the text in white, regardless if it is desktop or mobile.

The landline number that I am referring to is located on the homepage under the “Book Your Consultation at the Studio” orange button.

Could you please let me know why is it in black when I am checking my website from a mobile device?

Thank you!

#2

Hi @tatyana.kozh,

Thanks for writing in.

Upon checking on my desktop and mobile devices, your text does not show in black. Please clear your site and browser cache or use incognito or private browsing when checking.

If still occurring as black text on mobile, would you mind sharing us a screenshot and your admin credentials so we could check your setup closer.

Don’t forget to set it in a secure note.

Thanks.

#3

why is the landline number in black?

I have tried to look the website up in incognito mode

#5

Hi again,

You forgot to share the username, however I checked your setup from the front end and the black strip you see is due to the inline CSS being added to your custom Headline element where you’ve the landline number. Please remove the inline CSS to fix the issue.

Hope this helps!

#6

I like the black strip.

I don’t like the fact the the landline numbers themselves appear in black colour. They need to be in white colour just like the email address.

#7

Please read my message carefully to understand which issue I am referring to

#8

Hello There,

Thanks for writing in! This isn’t an issue in X. Please be advised that mobile devices such as iPhone and other iOs devices will automatically convert telephone numbers into a link. This is for easier access to number and can be directed clicked and copied to the dial screen. This is why, the color changes in mobile screen way different from the desktop screens.

To resolve this issue, you can make use of this code:

a[href^="tel:"] {
    color: white !important;
}

For reference, please check this out: https://css-tricks.com/the-current-state-of-telephone-links/

By the way, I have inspected your page and it seems that you have inserted several invalid html code.

<p>One of the most important aspects of having a suit made is how well the tailor works with the client, interpreting and gently guiding their wishes and expectations. Tatyana is excellent at this and long discussions ended up with a suit that precisely echoes my aims, but included a number of suggestions from her.</em></p>

which should be:

<p>One of the most important aspects of having a suit made is how well the tailor works with the client, interpreting and gently guiding their wishes and expectations. Tatyana is excellent at this and long discussions ended up with a suit that precisely echoes my aims, but included a number of suggestions from her.</p>

And this one:

<a href="mailto:[email protected]"span style="color: white;">[email protected]</a>

which should be

<a href="mailto:[email protected]" style="color: white;">[email protected]</a>

If still the black color of the tel number remains, please have it update and use this instead:

<span style="color:white;">02071297557</span>

Hope this helps. Please let us know how it goes.

#9

thank you so much for your very detailed response! It all works now :))

#10

On behalf of my colleague, you’re welcome. Cheers!