Streaming live at 10am (PST)

Tile Template Contact Overlay misbehavior on mobile device


#1

Hey team,

Wondering if anyone has an idea of why the Contact Overlay on my site created from the Tile Template misbehaves on mobile devices (smartphones). Its especially bad on iOS and seems to be related to the way mobile devices automatically zoom, especially when filling out forms.

In the case of iOS, the initial render seems to go right into zoom mode and the complete form cannot be seen. In Android initial render appears ok, but the zooming starts when you begin to enter something.

I'm afraid this has something to do with the fact that I am calling a custom .PHP Form and not using the one that came with the Tile Template. Any insight would be appreciated tho. Thanks!


Here is my public share link: https://preview.webflow.com/preview/coreappliance?preview=ee38fd5e3d15670a3740ee746e9b9c20


#2

Hi @mmediaman,

Don't know if you are able to control the styling of the form that you are using, but usually, the problem with misbehavior and zooming forms on iOS devices can be fixed bu applying font size:16 px.

Cheers,
Anna


#3

Thanks for the quick reply @sabanna. I'll give that a go!
Do you mean "all" fonts within the form to 16px? or no fonts larger than 16px ?
Do you know if that is supposed to take care of Android as well?


#4

Fonts in the form (input fields and lables) set to 16px.

It looks ok on my android phone now and I am sure will be good with 16px font size. One thing that you will want to fix is that now contact form is longer than phone screen and there is no way to scroll it down to Submit button.

Regards,
Anna


#5

Okay, thanks for that clarification. Will give it a go.


#6

Hi @sabanna, Your recommendation made it behave a little better for the initial render ....I think, but trying to navigate the form fields gets wild. In the original Webflow template's contact overlay, the form is well controlled, even though scrolling does not seem to happen there. Does it mean that you couldn't really have more fields than whats in the Template? How does the template form always know to position the submit button across the bottom of the phone screen?

The auto zooming appears to be a function of the phone OS or browser. Are there any alternatives for controlling this, or allowing scrolling of the the overlay? I can see the body of the site scrolls under the overlay.


#7

Hi, @mmediaman.

Try to set overflow: auto to the "Contact overlay", It should let user scroll it on the mobile devices


#8

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