My form is not responsive when embedded on my website

  • Profile Image
    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.  

     

     

  • Profile Image
    Welvin
    Answered 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:

  • Profile Image
    specsaversilearn
    Answered on February 28, 2017 at 06: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.
  • Profile Image
    Welvin
    Answered on February 28, 2017 at 08: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.

  • Profile Image
    specsaversilearn
    Answered on March 01, 2017 at 12:22 PM

    any luck Welvin? :) 

  • Profile Image
    Welvin
    Answered on March 01, 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;

    }

  • Profile Image
    ashwin_d
    Answered on March 02, 2017 at 05:32 AM

    Hello specsaversilearn,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!