Responsive iframe form

[Joe_Johnson]

Hello,

We are trying to make the Marketo iframe form responsive. After editing the form css and converting px to % in the edit draft page in Design Studio dashboard, we inserted the iframe into our site and wrapped it in a div container. When we resized the browser, the container is responsive but the the iframe form is not so it gets cut out. Have anyone encounter this problem before or have done it, and if so, could you please help?

Thank you,
Joe

[Anonymous]

I have not tested this on a Marketo LP yet, but you could try this.  It may take some playing around with to work the way you want it to.  Can't say for sure if it will even work with a iframed form though.

http://stackoverflow.com/questions/17838607/making-an-iframe-responsive

Edit: I just found this - iFrames cannot be responsive. You can make the iframe container responsive but not the content it is displaying since it is a webpage that has its own set height and width.

[Nicole_Mossinge]

I agree with Kenny.

The page you load into your iFrame is independent from the page that contains the iFrame. The two don't communicate about the current size of the iFrame.

Unless you figure out some magic to transfer the current width of the iFrame into the CSS of the landing page with your form, I don't see how you can make this work.

[Anonymous]

There is a Responsive iFrame script that NPR wrote about a year ago. I could never actually get it to work. My answer, iFrames aren't responsive, don't use iFrames.

[Joe_Johnson]

Thank you for all your input. 

[Anonymous]

Worked through this challenge myself recently, and here's what I came up with.

Since an iframe is basically its own window, its width is calculated independent of the main browser width. To make the landing page form responsive, you need to set up media queries on the landing page based on the size of the iframe and not the window.

Example:

If your iframe sits in a sidebar that has widths of 300px (desktop @ 960px), 225px (tablet @ 768px), and 125px (phone @ 480px), then on your landing page you want your media queries to be based on 300px, 225px, and 125px (instead of 960, 768, and 480).