What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I center the Form Collapse to fit all devices?

    Asked by snaplash on June 09, 2017 at 11:04 AM

    The form collapse looks great on my phone when portrait, but when it is turned horizontal, it exceeds the screen.

    Right now, I am using:

     

    .form-collapse-table {

        width : 90%;

    }

     

    which works, but is not the same width as the Submit Button at width:100%; however its not quite right.

     

    Could you help please?

     

    M.

    Page URL:
    https://www.jotform.com/build/71526800633957

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 09, 2017 at 01:18 PM

    I tested your form on iPhone 6 and iPhone 7 and on Samsung Note 3 and the form is showing fine:

    On which device did you test your form?

    Also, is the form embedded in a website or you're testing it directly?

    We'll wait for your response.

    Thank you!

  • Profile Image

    Answered by snaplash on June 09, 2017 at 02:49 PM

    I am testing on a Galaxy S3, directly to the address and using the:

    width:90%;

    seems to work, but the width of the form collapse fields are different than the Process Video button

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 09, 2017 at 03:07 PM

    I tested on S3 simulator and I was able to replicate this issue:

    I will try to find a CSS that will affect that field, but this could be related to the default Browser in Samsung S3.

    I will get back to you through this thread.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on June 11, 2017 at 01:38 PM

    Thank you very much for your patience.

    I tried to find the right CSS, so could you please try pasting the below CSS in your Custom CSS Field of the form:

    @media only screen 

    and (max-device-width: 1280px)

    and (orientation: landscape){

    .form-submit-button {

        width: 580px!important;

        margin-left:-155px!important;

    }

    }

    I tested on Nexus 4 since it is a similar resolution and I had hard time accessing the Galaxy s3 emulator and it should look like this:

    Please test and let us know how it worked for you.

    Thank you!