Responsive issue on website?

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

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.

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

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.

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

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.

Works perfectly, cheers brah.