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

    Alignment issues on mobile platforms

    Asked by PHSwendy on March 30, 2016 at 10:04 AM

    Is it possible to have the text in the radio button section wrap evenly at the beginning? I had responsive css here but now it doesn't seem to work. This section also now overlaps on my iPhone.

    Also, on my iPhone, it appears the Casa Spazio logo near the bottom of the form is stretching vertically. Can this be resolved?

    Page URL:
    https://form.jotform.com/PHSwendy/Award-Entry-PHS

    responsive radio buttons alignment images in table
  • Profile Image
    JotForm Support

    Answered by mert on March 30, 2016 at 10:43 AM

    For the changes which you have mentioned on your post, you can try to use the following code from the below:

     

    @media screen and (min-width: 10px) and (max-width: 400px){

    span.form-radio-item {

        width: 150px !important;

    }

    img{

    width: 10%;

    height: auto;

    }

    }

     

    @media screen and (min-width: 401px) and (max-width: 600px){

    span.form-radio-item {

        width: 250px !important;

    }

    img{

    width: 15%;

    height: auto;

    }

    }

     

    @media screen and (min-width: 601px) and (max-width: 2400px){

    span.form-radio-item {

        width: 325px !important;

    }

    img{

    width: 25%;

    height: auto;

    }

    }

     

    .form-section {

        width: 80%;

        margin: auto;

    }

     

    Also, please don't forget to let us know the results.

    Regards.

  • Profile Image

    Answered by PHSwendy on March 30, 2016 at 12:07 PM

    No good. It changes the 2 columns of radio buttons into one column and makes the header image smaller:

  • Profile Image
    JotForm Support

    Answered by Kiran on March 30, 2016 at 02:18 PM

    Could you try adding the CSS code provided below:

    .form-radio-item {

    white-space: normal !important;

        display: inline-block !important;

        padding-right: 12px !important;

    }

    I've cloned your JotForm to my account and added the above CSS code. I've checked the form on a iPhone emulator see the following.

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

  • Profile Image

    Answered by PHSwendy on March 30, 2016 at 03:36 PM

    Hmm, your screenshot doesn't show what I am after. I'd like all the text to align on the left to the riht of the radio buttons - not wrap under the button. Just as it does below:

    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  • Profile Image
    JotForm Support

    Answered by Kiran on March 30, 2016 at 05:17 PM

    Ok. Could you try injecting the following CSS code to see the result as shown below:

    .form-radio-item label {

        white-space: normal;

        display: block;

        margin-top: -18px;

        padding-left: 17px;

    }

    I believe this is something you are looking for. If you need any further assistance, please let us know. We will be happy to help. 

  • Profile Image

    Answered by PHSwendy on March 30, 2016 at 05:53 PM

    That solved it!! Thank you so much.

  • Profile Image
    JotForm Support

    Answered by Chriistian on March 30, 2016 at 10:24 PM

    I am glad to know that your issue has been resolved. On behalf of my colleagues, you are most welcome. Feel free to contact us again if you have any other concerns. Cheers.