Mobile | Phone number does not appear in footer on iOS

I designed a small website, the first one I’ve created with Sitejet:

The “Information” section is in the footer, and it’s visible on a PC. However, on mobile, the phone and the mobile information aren’t visible; the numbers are present, as evidenced by the seemingly empty space if I enter additional text afterward, and by the fact that clicking on that space initiates a call. However, even though I’ve tried changing the font and background colors, the numbers still aren’t visible. I’ve also tried adding a new text box above the logo in the footer, but only the word “cell” is visible, not the number.

I can’t figure out what’s causing this issue. Thanks for any help.

m

Heyyyy, welcome and congrats! :slight_smile:

Please log into the Website Builder and copy me the number in the URL in here. That is the Website ID that I need to test it.

Also, on which phones did you test it and on which browsers? Was this specific case on Apple? Does this only happen on mobile, right?

Thank you for your quick reply.

… do you mean this one? cpsess5129680718

I test in iPhone 13 Pro with Safari.

On my pc (Debian Linux) all seems to go well… I tried in Firefox and Chrome.

m

I ask a friend, and on a Samsung Galaxy 22 the footer is perfect, with all information ok!

I installed Google Chrome on my iPhone and There too is all ok.

So I deduce the trouble is only on Safari in iPhone 13.

As soon as possible I’ll ask my daughter to test the site on Safari on her iPhone 16

m

Same problem on Safari in iPhone 16:

Here Google Chrome in my iPhone 13:

As soon as possible, I test my son’s ipad and MacAir

in MacBook Air M4 15" all is ok.

In ipad A16 same problem: no phone numbers.

I don’t know if there is a connection, but in my experience the trouble happens only with Safari in device with not a wide, but with a hamburger menu.

With SIteJet the generation of hamburger menu for “narrow” devices is automatic. I don’t know how is possible to change its particular settings, for I find only a way to work on default, wide menu.

Thank you

Hey. Ah, so that is actually a Apple issue. Let me take a look.

Actually the Website ID is explained here: https://help.sitejet.io/hc/en-us/articles/24275958355479-How-to-report-an-issue-or-a-bug

The problem actually only occurs on certain Apple devices. I don’t know if it’s a Safari bug or Sitejet’s incorrect handling of some aspect of the code. I know Safari is a good browser, but not perfect… Thanks for the tip on how to compose the reports. The website ID is the following one: 3378443

Thank you

m

I did another experiment, the results of which are mysterious to me.

I added bold, red text with the mobile phone number to the bottom of the main container. Then I copied the element and moved the copy to the footer.

Here’s how it looks on PC:

And here’s how it looks on mobile:

As you can see, inside the main container, Safari on iPhone interprets it as a link and keeps it, but changes it from red to black, precisely like a link. The same element, duplicated and moved to the footer, once again loses the phone number.

Note that if I insert a simple number as 01234 at the voice “Phone”, it appears!

m

Hey Mauro,

so I was told, that it is not a bug but a rather inconvenient feature from iOS. iOS copnverts phone numbers to clickable links. When this happens, no color is set for this link and the number is transparent. So it looks like you discovered.

Please add following code snippet to the CSS under Code. Just paste it at the end of the code.

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

in your case, it needs to look like this:

.ed-element.preset-footer-saga-v3-default {
@include footer-saga-v3;
a[href^=tel] { color: inherit; text-decoration:inherit; }
}

We have added the code for you.

Let me know if that works for you.

Um… Where exactly should the line of code be inserted? My footer is made up of a container containing various elements. The information, including the phone numbers, is inside a “Text” element. Which CSS should I change? The container’s or just the text element’s? Or something else? I’m sorry, but I’m not very knowledgeable about these things…

I tried to insert in CSS of “text” (Information), but it seems do not work:

I suspect it’s a formatting issue. I inserted a cell with a white background and dark text, and in this case the number is visible!

There must be some “perverse” interference between the footer and text background colors and the link formatting…

m

Let me take a loot with a developer. And no worries, this is an issue from iOS. :smiley: We will investigate this and find a proper solution for you :slight_smile:

Thanx a lot !

Precisely because there was obviously something wrong with the text/background settings, I performed the following steps: I changed the text container background from very dark gray to light gray; I manually changed the text background to light gray. At this point, all the text was visible. I changed the container background from light gray back to the original dark gray; I manually changed the text background from light gray back to the original dark gray. At this point, the phone numbers reappeared on the iPhones (I checked both my 13 Pro and my daughter’s 16 Plus) and on iPad !! :slight_smile:

m

Hey Mauro, I have edited the solution.

The code has been added to the preset :slight_smile: Should work fine now.

Now everything works fine everywhere! Thanks for your help, and above all, thank you and congratulations for the extraordinary support you provide on this site!

m

:smiling_face_with_three_hearts: Thank you!