Streaming live at 10am (PST)

Major iPad issues


#1

Created a simple landing page with some buttons in a div at the bottom which looks great on desktop. Looks great when i go to the tablet view. But on an actual iPad it is so broken beyond belief i don't know where to start to fix it.

I then decided to just try and hide it but of course WebFlow has no landscape view setting so it re-appears on landscape -- still broken.

Yes I know I will need to head into the code and fix it by hand but why does WebFlow not have all the breakpoints in the system that we need?

How do i send screenshots or a link to a support person to show them what is going on?


#2

Hello @Crispin,

Could you please update your post with a read-only link so that we can help you faster?
How to Share a Read-Only link to my site: http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance! :smile:

Regards,
Anna


#3

Sure here you go: removed

And here's what is happening on iPad:


#4

And few more questions:
- What browser do you use on iPad?
- Is it landscape or portrait view?


#5

Safari. Both views. I had hidden that block on the tablet setting but since it didn't affect it on landscape i've put it back for viewing.


#6

Could you try to make those links display: block instead of inline-block?


#7

that didn't help. i've tried making columns and sub columns and all is fine on chrome -- but safari continues to do weird things. The icon is really tiny for some reason and floating up and to the right.


#8

ok it turns out this is something to do with how iPad handles phone numbers (apparently). As soon as I took out the phone number (which i didn't link -- the device just senses it) --- it renders fine.


#9

So it has something to do with device. What iPad version do you use?


#10

Hey @Crispin you can just add a class to the phone number and then style it at the different breakpoints. That should resolve the issue. :smile: iOS has a mind of its own :wink:


#11

@Waldo Any idea what settings need to be put into CSS? It went beyond just the usualy bllue color as it really messed it up.


#12

Hey @Crispin it appears that your row & columns fixed to the bottom of the screen haven't been styled yet. I recommend adding a set height to the row and columns and that should help resolve the issue on iPad and add a class name to the phone number (may need to use a span style) and change the font color/remove underline (basically force it so that it's not inheriting styles from desktop).

Let me know if that helps please.


#13

discovered this too:

<meta name = "format-detection" content = "telephone=no">

#14

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