Make this form Mobile Responsive

  • Profile Image
    SaleBootCamp
    Asked on May 24, 2017 at 01:35 PM

    Hello,

    Love Jot Form and love the forms. Quick question, I am following the on-line suggestion to make your form mobile responsive by ticking the "Make this Form responsive" in the Advanced bit of Advanced Designer, Form Layout - however the tick box is not there and as a result on an iphone length ways it cuts off the form - it works if you turn it horizontally though, I have also added in the Mobile Plugin but it is the same issue.

    Any suggestions?

    Thanks,

    Andrew.

  • Profile Image
    Kiran
    Answered on May 24, 2017 at 03:07 PM

    I have checked your form on iPhone mobile emulator and see that the form is not displaying with the responsive width. Please try injecting the following code to the form to reduce the width of the form while viewing on mobile devices.

    @media screen and (min-width: 10px) and (max-width: 540px){

    .supernova {

    width: 90%;

    }

    }

    Please get back to us if the issue still persists. We will be happy to assist you further. 

  • Profile Image
    SaleBootCamp
    Answered on May 24, 2017 at 05:53 PM

    Hello,

    I've added that into the CSS bit on the Advanced bit - it is better but...

    1. Still has a few bits missing to the side.

    2. The last question which is a 1-10 question is missing

    3. The submit button is now missing

    Any suggestions?

    Thanks in advance,

    Andrew.

  • Profile Image
    EltonCris
    Answered on May 24, 2017 at 07:35 PM

    You're right, it is a bit cut-off on the right side and there's an overlapping field.

    Can you please try to remove the CSS codes provided by my colleague and replace it with the following?

    @media screen and (max-width:500px){

    .form-scale-table th, .form-scale-table td {

        padding: 9px 2px;

    }  

    }

    I actually don't see any cut off in your form except the overlapping scale rating field. Making it horizontal is a bit complex. The easier way is to reduce it's left and right spacing.

    Here's the expected result:

    Please let us know if this doesn't fix the problem on your phone so we will try another solution.

    Regards!