How to disable blue hyperlink for date and address on mobile

Design help General
#1

Hello,

How do I disable the blue hyper links that appear on an iPad for days of the week, times and street addresses? I was able to do this for the phone number by adding a custom attribute:

a [href^=tel] { color: inherit; text-decoration: none; }

I tried doing the same for date and address by changing href^=tel to href^=date

I do not code. I found the help with the phone number by searching online but could not find anything to help with the date and address.

Thanks.

#2

Hi @stuzz

Help us out and update your post with some more information about your problem.

#3

Hi @Davidn,
Here is the link to our website:

http://www.thaitranquility.com/

Of course, you will need to be viewing it on an iPad (or perhaps it does so on other tablets as well) to see the issue. If you scroll down to the bottom of the page you will see DAYS & HOURS, LOCATIONS, and CONTACT. Below the headings there is Monday-Friday with the hours listed. The text below the heading is the default blue hyperlink that allows a user to tap it and open Calendar. I do not want this to be a hyperlink and want the text to be gray not blue. The same for the business address. I was able to accomplish this with the phone number only. This appears on my iPad mini and not my iPhone.

#4

Oops, sorry I did not provide my Read-Only Link earlier. Here it is:

https://preview.webflow.com/preview/thai-tranquility?preview=8e4917a169a0ef2d6ccb52c27c1e9f6c

Thanks.

#5

I am not exactly sure what you are trying to achieve but from my own testing your costume attribute seems to be unnecessary. By adding a class and styling to the link block you can get the same result.

I took a look at your design and my own recreation and couldn’t recreate what you describe.

Is this still a problem or is there any other information you can give me?

#6

Hi @Davidn,

Thank you for your response. I deleted the custom attributes for the hours and address and then added a class to the blocks of each. Unfortunately when viewed on my iPad the MONDAY-FRIDAY 9:00 am- 9:00 pm continue to be blue hyperlinks.

#7

Hi @stuzz, thanks for your update. I did a little testing on this, on iphone and ipad, but I am unable to reproduce the blue text links you mentioned. Could you let us know, what model of ipad are you using, and what version of iOS? That way we can test with exact same device :smile:

Here is what I see on iphone:

1156×1704 404 KB

And ipad:

1428×1896 577 KB

Cheers, Dave :slight_smile:

#8

Hi @cyberdave,

Thanks for looking into this. I am viewing the site on an iPad Mini 3 and the iOS is 8.2

Yes, I do not see the blue hyperlinks on my iPhone 5 and 6.

Thanks again.

#9

Hi again @cyberdave,

I just realized another issue with this site on the iPad and would greatly appreciate it if you could help. The nav bar displays in portrait mode but the button is not appearing. In landscape mode the whole nav bar is missing.

Thanks.

#10

I run into this all the time because iOS sets the link color to blue; especially is this the case for phone numbers.

Here’s the fix…

Include CSS code in your site settings that looks somewhat like this. You’ll need to change the class to what fits your site; you’ll need to set !important though so iOS doesn’t override it. And change the color to whatever you need.

.footer-contact-block a {
        color: #e4e8eb !important;
    }
2 Likes
#11

@fuzendesign Thanks for this helpful reply.

#12

You can also add meta-tags in your Dashboard > Custom Code in the Head Section to get rid of linked phone numbers:
<meta name="format-detection" content="telephone=no">

3 Likes
#13