Responsive issue on website?

  • Profile Image
    RHemery
    Asked on August 18, 2016 at 11:55 AM

    Hi there - form looks great and is responsive but when you go under roughly 650 pixels, the left padding seems to disappear on the form element?  How can I get the padding to match the rest of the text?

    http://www.bedford.ac.uk/fees/test/full-time-level3.htm?courseFee=4170

    Thanks

    Rich

  • Profile Image
    Charlie
    Answered on August 18, 2016 at 01:06 PM

    Hi Rich,

    May we know how the form is added? From the looks of it, it seems like you have embedded it on your website using the form's full source code? Please note that we cannot guarantee that the style and the function of the form will work fully, this is because there is a high chance that your website's resources and of the form's will conflict. 

    If you are not adding custom function or scripts on the form directly, then I would like to recomment using the iFrame embed code instead. Here's a guide on how to get your iFrame embed code: https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

    You will also need to enable your form's mobile responsiveness, here's a guide that you can refer to: https://www.jotform.com/help/322-How-to-make-mobile-friendly-forms-on-JotForm 

    I hope that helps.

  • Profile Image
    RHemery
    Answered on August 19, 2016 at 03:49 AM

    Hi Charlie

    I've enabled the responsiveness, it works great, it's just under a certain width of pixels the form text shifts to the far left with no margin/padding.

    Unfortunately I can't use an IFRAME as I am using some JavaScript calculate functions (hence Source Code method).

    Rich

  • Profile Image
    BJoanna
    Answered on August 19, 2016 at 06:02 AM

    Webpage you provided is unavailable, so I am unable to test your form.

    Did you added Mobile Responsive widget to your form? If not please add it to see if that will resolve your issue. 

    Let us know if you need further assistance.

  • Profile Image
    RHemery
    Answered on August 19, 2016 at 06:23 AM

    Hi BJoanna

    The correct link now is:

    http://www.bedford.ac.uk/newfees/full-time-level1-and-2.html

    My issue is... there looks like there is 20px or so padding to the left (I want the text to be lined up) this is on desktop view of the page.

    However, my original problem doesn't seem to be an issue now - when the media query changes the JotForm text lines up OK with the other text.

    Thanks

  • Profile Image
    Chriistian
    Answered on August 19, 2016 at 09:32 AM

    Hi,

    Do you mean you want to form's texts to be aligned with "Please answer the following questions..."?

     

    You will need to add this CSS to your form or page.

    .form-line {

    padding-left: 0px !important;

    }

    Since you are embedding the form to your page through the form's source code, you can either add the CSS directly to your page or inject the CSS to your form.

    Do let us know if you need further assistance.

  • Profile Image
    RHemery
    Answered on August 19, 2016 at 11:12 AM

    Works perfectly, cheers brah.