Disable telephone link on mobile, only in footer

Support
#1

I have the contact number to my business listed in the footer but the styling of the text essentially dissapears when viewed on a mobile phone because it is automatically linking it as a telephone number link. While I like this in general, I want to disable it for the footer only so that the text will be visible and match the styling of the other elements of the footer. How can I do/code this?

#2

Hello @ggarmen,

Thanks for asking. :slight_smile:

You can take a look at solution mentioned in following thread.

Thanks.

#3

I tried entering that code in the CSS for the footer and adding a to the headline element and nothing changed. Please advise.

#4

Hi again,

Try giving your element a class e.g mobile-fix and then add the following code in the Theme Options > CSS:

.mobile-fix {
    color: rgb(204,197,185) !important;
    text-decoration: none !important;
}

Let us know how this goes!

#5

Thank you for the quick reply Nabeel. It’s still not working, and I think it is because I am not assigning the class properly to the element. This is my first time working with Pro so forgive me. I went to the element inspector for the headline and in the text box I added:

<span class="mobile-fix">864-288-0001</span>

How should I be assigning the class?

#6

Hi there,

You added the class correctly but kindly update the CSS code to:

.mobile-fix, .mobile-fix a {
    color: rgb(204,197,185) !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
}

Hope this helps.

#7

I updated the code but the issue is still not fixed

#8

Hello There,

Please update the code and use this:

.mobile-fix, .mobile-fix a,
.mobile-fix a[href^="tel"],
.x-colophon  a[href^="tel"]{
    color: rgb(204,197,185) !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
}

We would loved to know if this has work for you. Thank you.

#9

Still not working. Feel free to paste the code in the footer, save and test it yourself on a phone to see if the new code works.

Text Displaying Wrong Color
#10

Hello There,

You may have inserted the code incorrectly.

The code must be:

.mobile-fix, .mobile-fix a,
.mobile-fix a[href^="tel"],
.x-colophon a[href^="tel"]{
    color: rgb(204,197,185) !important;
    text-decoration: none !important;
    pointer-events: none;
    cursor: default;
}

And please clear your mobile browser’s cache or use private browsing mode and test again.

Please let us know how it goes.

#11

That did the trick. Thanks for your help and persistence!

#12

You are most welcome!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.