Iframe not showing on mobile devices

I’ve embedded a Google form in an iframe element on a project I’m working on and it shows up fine on a desktop. But I’ve tried on several different iPhone models, two iPad models, and a Droid device and it simply doesn’t show up on any of them. I’ve searched and found that there have been issues with scrolling and iframes, but I haven’t found anything on this and it seems this would be something a lot of people would be asking about.

Any ideas would be appreciated. Feel free to beat the site up as well. This is my first “real” project since starting to learn web dev and I’m not a designer, but definitely want to get better.

prayer365plus.org

Thank you!

maybe try putting a min-width and min-height value in the css for it.
I didn’t actually try it on mobile but I used the firefox browser settings to display it for mobile. It still displays, but comes out small on a vertical value.

1 Like

Thank you, erick. I tried that and it still didn’t show. It does show on Chromes developer tools mobile display. But on the actual devices themselves it’s like the iframe is completely ignored.

I just figured out that if I tap “Request Desktop Site” on my iPhone, the form shows up beautifully. So now, what is the best way, design-wise, to let my audience know they need to request the Desktop version of the site?

I suspect there is a problem with the request for the iframe content. Not sure why though, it’s using https. Not seen this issue before.

I’ll try debugging in mobile later

Thank you, brainbug. I think I’ve got it fixed.

Before, for some reason, I didn’t copy and paste or I took out some of the attributes in the iframe element that Google includes. So I went back and re-copied the code from the form and put it in my html document and only change the width from pixels to 100%. Now, so far, it has shown up on all the IOS devices I’ve tried. I’m waiting on my wife to check it on her Droid, but I suspect it will work.

No problem, glad you found the issue.

It’s working great on my Android (samsung running lollipop) :+1:

1 Like

I face the same problem but i didn’t know what can i do?