Streaming live at 10am (PST)

Display issues on phones and tablets

Hi all :slight_smile:

Having a little problem.
I have the phone number displaying in a large font when [Contact Us] in the menu and other buttons is clicked. The phone number shows in the designer. All responsive views.

https://preview.webflow.com/preview/ablegates?utm_medium=preview_link&utm_source=dashboard&utm_content=ablegates&preview=5003de912f285d7d62c4655734a4f06f&mode=preview

However, on my phone (iPhone SE), my tablet (iPad Mini) and a friend’s phone (iPhone 6S) everything BUT the number displays.
It DOES display on my desktop (Chrome) and my laptop (Safari).

The strange thing is that at first, it did display on my phone…

Hoping someone has insight…

Thanks!
Pierre


https://preview.webflow.com/preview/ablegates?utm_medium=preview_link&utm_source=dashboard&utm_content=ablegates&preview=5003de912f285d7d62c4655734a4f06f&mode=preview
(how to access public share link)

Please share a published URI to the page you have issues with.

Apologies. Here it is.
https://ablegates.webflow.io/gates-eg

The anchor (phone text) is being set to display none. So mobile detects a phone number and wraps it with a link so the user can click the link and dial the number. The link is hidden since your global styles for ALL anchors are display none.

Ok… the contact overlay is set to not display. Is this not part of the design?
Although, I don’t understand “The anchor (phone text)…”? How do I access those parameters?

Forgive the rookiness.

Pierre :slight_smile:

I can also not access the visible text in the fields once I double click to edit the [Contact Overlay]
I don’t see the text. I guess what I’m doing by clicking in the boxes and deleting what I think is there.
I would like to see what I’m doing… is there another area to edit this contact page?

:slight_smile: Pierre

Default links should be visible. In your design “ALL Links” in the designer have been styled to display none. That style is affecting the display of a link created by the browser (on IOS for example) for a tel:// link. When you wish to change the default style of an element, it is best to add a class then style that class. Set links to visible.

In the video you can see that the Contact Overlay element has visibility off and opacity set to 0%.

CloudApp

I see the visibility and opacity states…
Thanks for the video.
I still can’t make sense of the number not displaying. Where do I set the link visibility?
To my mind the opacity is somehow made visible by a trigger when clicking the contact link?
This is a template I am using and the number used to display on iOS. I must have inadvertantly click something somewhere…
Thanks for the patience.

See video
CloudApp

Thank you so much, Webdev. I wouldn’t have solved this on my own. Works like a charm, now.
I’d really like to know how I managed to set all links to hidden… must be my ‘hunt and peck’ approach.

Thanks again!
Pierre