Problem with responsive form embedded in iframe on desktop pc

  • crom1983
    Asked on March 9, 2017 at 11:12 AM

    Hi everyone!

    The appearance of my form on http://www.alpha-kopierer.de/kopierer2 changed during the last 2 weeks. It seems as if it tries to display the smartphone version on desktop pcs? The preview in the builder looks okay and 2 weeks ago it was displayed properly. Any ideas to fix that problem?

    Thank you in advance.

     

  • Welvin Support Team Lead
    Replied on March 9, 2017 at 8:12 PM

    Please try re-embedding the form using our default embed code. 

    https://www.jotform.com/help/34-Adding-a-Form-to-a-Web-Page

    Let us know if the issue persists.

     

  • crom1983
    Replied on March 10, 2017 at 4:29 AM

    Thank you for help. I used the default embed code, but the problem persists.

    <script type="text/javascript" src="https://form.jotformeu.com/jsform/70462375479364"></script>

     

  • Support_Management Jotform Support
    Replied on March 10, 2017 at 9:18 AM

    We had a temporary issue yesterday where embedded forms were rendered as if viewed from mobile. This has now been fixed so please check your form on this page again http://www.alpha-kopierer.de/kopierer2/ and let us know if the issue persists.

    If it does, kindly share a screenshot of how it should look like, here's how.

  • crom1983
    Replied on March 10, 2017 at 2:01 PM

    Your fix changed the layout a bit. The images are now in the same line with the checkboxes, but there are still some display issues.
    This is how the form was displayed before the "temporary issue":

    Problem with responsive form embedded in iframe on desktop pc Image 1 Screenshot 20

  • Support_Management Jotform Support
    Replied on March 10, 2017 at 3:41 PM

    Looks like the image size causes the layout to appear differently when the form is placed inside a small container.

    Try injecting the following CSS codes and see if they will help:

    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {

      img.form-image {

        width: 100px;

      }

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes 

  • crom1983
    Replied on March 10, 2017 at 4:54 PM

    Thank you for your help. I had to change some additional issues by hand, but now it works fine.

    Problem solved!