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 to center image radio buttons in form?

    Asked by art_crate on January 14, 2017 at 03:34 AM

    Hello,

     

    I would like to center my questions on mobile. Please see the screenshot attached.

     

    Questions that need to be centered:

    2,3,4,7,8,9,10

     

     

    Thanks!

    Page URL:
    https://form.jotform.com/70091287457966

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Nik_C on January 14, 2017 at 02:55 PM

    I noticed that those fields were a bit off even in norma view, so please try to copy and paste the below CSS to your Custom CSS field:

    #cid_140{

    margin-left:25px!important;

    }

    #cid_128{

    margin-left:25px!important;

    }

    #cid_63{

    margin-left:25px!important;

    }

    #cid_157{

    margin-left:25px!important;

    }

    #cid_159{

    margin-left:25px!important;

    }

    #cid_112{

    margin-left:77px!important;

    }

    #cid_113{

    margin-left:77px!important;

    }

    You can adjust the margins more if needed.

    If you have any additional questions please let us know.

    Thank you!

  • Profile Image

    Answered by art_crate on January 16, 2017 at 08:15 PM

    Hi Nik,

    Thank you for the css. That seemed to center the questions. However now some of the Questions and Buttons (Next, Back) look like are pushed off the screen.

    Any ideas why that would be happening? That should all be responsive.

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on January 16, 2017 at 11:20 PM

    Do you mean to say it creates horizontal spacing when viewed on mobile?

    On my colleague's CSS codes, replace margin with padding, see if this helps.

    Example:

    From:

    #cid_140{

    margin-left:25px !important;

    }

    To:

    #cid_140{

    padding-left:25px !important;

    }

    This should not expand the form width when viewed on mobile.

    Hope this helps!

  • Profile Image

    Answered by art_crate on January 18, 2017 at 03:01 AM

    Thank Elton,


    Changing to padding fixes the issues on mobile, but it breaks desktop view. Below you will find two screenshots to see the errors I was encountering:

    Padding

    Margin

     

    Thanks for the help!

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 18, 2017 at 04:04 AM

    Please allow me some time to check this for you and I'll get back to you with possible solution.

    Thank you!

  • Profile Image
    JotForm Support

    Answered by Nik_C on January 18, 2017 at 11:25 AM

    Thank you for your patience.

    I did some tests, and with my original CSS code from the previous reply, I couldn't see what is wrong in the form.

    This is my test in Browser:

    And here are the screenshots from my phone:

      

     

    I'm sorry if I'm overlooking something, but it seems ok on my phone and my browser. Unless your buttons should be upper a bit.

    We'll wait for your response.

    Thank you!