My form is not responsive when embedded on my website

  • specsaversilearn
    Asked on February 27, 2017 at 11:21 AM

    Hi, 

    My form is mobile responsive in a direct link but when it is loaded onto another web page - it is no longer responsive. The 'mobile responsive' widget does not load either.  

     

     

  • Welvin Support Team Lead
    Replied on February 27, 2017 at 12:43 PM

    Your form fields are responsive upon checking the form using my android phone. It is also responsive upon viewing on IOS6 (browserstack's real device).

    The top header image has a slight issue, you can fix it by injecting the following custom CSS codes in the form:

    @media only screen and (max-device-width: 767px) {

    .form-all:before {

        background-size: contain !important;

    }

    }

    Follow our steps on this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    Here's a screenshot from my phone:

    My form is not responsive when embedded on my website Image 1 Screenshot 20

  • specsaversilearn
    Replied on February 28, 2017 at 6:56 AM

    Hi, thanks for looking at it. If you scroll down you'll see that the table below isn't responsive. 

    I have tried removing the header image, injected the recommended CSS and resizing some of the tables etc. None of those had any effect on apple iPhone 6. The browser stack must not be showing a true representation of this.

    I have also tried the direct embed link for wordpress and the iframe embed code. Is anything else we can try.
  • Welvin Support Team Lead
    Replied on February 28, 2017 at 8:09 AM

    Browserstack is using a physical device for their emulators so it is 100% accurate. Anyways, I see the issue now. I will try to fix this for you. I'll let you know. Please don't edit the form until I'll give you the update here.

  • specsaversilearn
    Replied on March 1, 2017 at 12:22 PM

    any luck Welvin? :) 

  • Welvin Support Team Lead
    Replied on March 1, 2017 at 12:32 PM

    I'm so sorry. It's actually an easy fix. It's the URL at the bottom of the form that's causing the responsive problem in mobile devices. I've fixed it for you. You can see the following custom CSS codes in the CSS area of the form:

    div#text_31 {

        width: 100%;

        box-sizing: border-box;

        overflow-wrap: break-word;

      word-wrap: break-word;

      -ms-word-break: break-all;

      word-break: break-all;

      word-break: break-word;

      -ms-hyphens: auto;

      -moz-hyphens: auto;

      -webkit-hyphens: auto;

      hyphens: auto;

    }

  • Ashwin JotForm Support
    Replied on March 2, 2017 at 5:32 AM

    Hello specsaversilearn,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!