Why doesn’t my code for responsive Google Forms iFrame work on all devices?

  • vicgolding

    (@vigolding)


    7 years, 6 months ago

    Hi,

    I’ve made the iframe for our Google Form on a WordPress website responsive and it does work on some devices using certain browsers, but not everywhere:

    – Windows Firefox: works
    – Windows Chrome: doesn’t work
    – iPhone Safari & Chrome: works
    – Android Firefox & Chrome: doesn’t work

    Using the newest browser versions by the way.
    Here’s the code that I used:

    `<div class=”resp-container-1″>
    <iframe class=”resp-iframe-1″ src=”XXX” width=”100%” height=”100%” allowfullscreen=”” frameborder=”0″>Wird geladen…</iframe>
    </div>`

    and

    `.resp-container-1 {
    position: relative;
    overflow: hidden;
    padding-top: 75%;
    }

    .resp-iframe-1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    }`

    Please find screenshots below.

    I’ve checked, double-checked and fiddled around with it, but I can’t figure out how to tweak the code. What am I doing wrong?

    Any help would be greatly appreciated!

    Thanks,
    Victoria

    Windows Firefox:
    https://i.stack.imgur.com/kVtUV.jpg

    Windows Chrome
    https://i.stack.imgur.com/HaOmT.jpg

    iPhone Safari
    https://i.stack.imgur.com/X0IMj.jpg

    Android Firefox
    https://i.stack.imgur.com/sc15U.png

Viewing 2 replies - 1 through 2 (of 2 total)
  • 3dmasons

    (@3dmasons)

    7 years, 6 months ago

    I’ve always removed “width” and “height” from the iframe code and just replaced it with: style=”width:100%;” and I never tell it to use height 100%. Worse case scenario you could specify an actual height and in CSS reduce the height for certain screen sizes (the width:100%; should keep the ratio no matter what height you use).

    Hope this helps.

    mica123

    (@mica123)

    7 years, 1 month ago

    Hello Victoria,

    I would very much like to know if you are still using iFrame for Google Forms or have you gone for something else?

    Many thanks and looking forward to hearing from you.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Why doesn’t my code for responsive Google Forms iFrame work on all devices?’ is closed to new replies.