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 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.
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
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!
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.
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:
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 !!
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!