Responsive Form Issues

https://form.jotform.us/72015519858159

On this form- I'm having a few responsive issues.

1. Under 1279pixels, the form should expand to fullwidth rows to occupy the entire screen size- instead it cuts off some of the form fields.

2. On a smaller screen- like 480 pixels, there is no padding/space to the right of the form- the form fields are pressed against the right frame.

1. Under 1279pixels, the form should expand to fullwidth rows to occupy the entire screen size- instead it cuts off some of the form fields.

Here is what it looks from my end at 1279px.

Did you mean a different screen size? Can you please attach a screenshot of how it looks on your end?

2. On a smaller screen- like 480 pixels, there is no padding/space to the right of the form- the form fields are pressed against the right frame.

Please look for the following part of your custom css and add the highlighted line.

--------------------

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

.form-all{

  padding: 30px !important;

  width: auto !important;

}  

}

--------------------

The result will be as follows.

#2 fix works-

But see attached screenshots for #1. The form fields are being cut off/hidden at several screen resolutions. It looks normal at 654 pixels

It seems the screenshot you have attached was not properly uploaded. Please upload your screenshot directly on this thread so we can properly view the screenshot. You can access the thread using this link: https://www.jotform.com/answers/1205336. Then click on the image icon to upload the screenshot/image to this thread.

Please check this guide for more information: How to Post Screenshots to Our Support Forum.

please see attached:

I check again your form on your website (http://abb.5d3.myftpupload.com/about/), however, I was not able to replicate the issue you are reporting. The form seems to be displayed in full width even on lower width. 

May I know the browser and device you are using when you encounter the issue so we can further check the issue?

Yes- google chrome i see the issue above from my screenshots/- on a mac

Firefox- it is working- except the Request Appointment button gets messed up- is there a way to fix that? see attached

I was able to see the issue regarding the Request Appointment button on my end.

To fix this, please try to inject the following custom CSS code to your form.

.form-submit-button {

    white-space: normal;

}

For your concern on Google Chrome on Mac, can you try to clear your browser cache and see if this will fix the issue? If the issue still persists, may I know what is the version of the Chrome browser where you encountered the issue so I can further check?

its fixed now- thank you!