Responsive Form Issues

  • Profile Image
    AdminRSCM
    Asked on July 21, 2017 at 03:07 PM

    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.

  • Profile Image
    Chriistian
    Answered on July 21, 2017 at 04:50 PM

    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.

  • Profile Image
    AdminRSCM
    Answered on July 24, 2017 at 09:36 AM

    #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

  • Profile Image
    Chriistian
    Answered on July 24, 2017 at 10:52 AM

    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.

  • Profile Image
    AdminRSCM
    Answered on July 24, 2017 at 10:57 AM

    please see attached:

  • Profile Image
    Chriistian
    Answered on July 24, 2017 at 12:19 PM

    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?

  • Profile Image
    AdminRSCM
    Answered on July 25, 2017 at 09:48 AM

    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

  • Profile Image
    Chriistian
    Answered on July 25, 2017 at 11:17 AM

    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?

  • Profile Image
    AdminRSCM
    Answered on July 25, 2017 at 12:07 PM

    its fixed now- thank you!