Mobile Responsiveness for Iframes

  • Profile Image
    Brian Stenzler
    Asked on January 21, 2018 at 01:32 AM

    I have multiple forms that are embedded on my website using IFrames. Unfortunately, the way I have it set up, the dimensions are good for desktop viewing, but they are not mobile responsive... in other words, half of the IFrame is off the screen on my iPhone.

    Is there any way to make the IFrame more mobile responsive without needing to decrease the width dimensions? I currently have them at 850 px which is very nice on the desktop.

    The page I have these on is http://dreamwellness.com/form/.

    Thanks so much!

    Brian

  • Profile Image
    Dreamwellness
    Answered on January 21, 2018 at 09:43 AM
    Hi,
    Thank you for the information… but unfortunately I am not able to make it work. I tried the second option by copying that code into the CSS widget within Jotforms “Home Forms Page” and nothing changed. As for the option of changing the CSS on my webpage, I don’t know how to do that. Please help, this is really important that it gets resolved today.
    Thanks so much!
    Brian

    Helping you live your D.R.E.A.M.... everyday!

    Brian A. Stenzler, MS, DC
    President/CEO D.R.E.A.M. Wellness
    President, California Chiropractic Association 2014-2016
    1130 Camino Del Mar, Suite I
    Del Mar, CA 92014
    (858) 847-0110 ext 104
    brian@dreamwellness.com
    www.dreamwellness.com

    ...
  • Profile Image
    EltonCris
    Answered on January 21, 2018 at 01:17 PM

    You seem to have multi-layered forms. The iframe widget is responsive but the iframe generated by the form isn't. So to fix it, inject this CSS code within the iframe embed widget settings under Custom CSS tab on this form https://form.jotform.com/form/80198610122146.

    iframe {width: 100% !important;}

    Example:

    Let us know should you require further assistance.