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

    Form Not Responsive (although @media css included in template)

    Asked by Hisidentity on March 16, 2016 at 05:32 PM

    I have created my form based on a template which already has @media css included but it doesn't appear to be working. My form can be seen here: http://www.hisidentity.org/volunteer/volunteer-registration-form/

     

    Any ideas?

    Page URL:
    http://www.hisidentity.org/volunteer/volunteer-registration-form/

    template not responsive in form not responsive
  • Profile Image
    JotForm Support

    Answered by BDAVID on March 16, 2016 at 08:56 PM

    You form is to wide, please inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

    .form-all{

    max-width: 690px !important;

    }

    To go from this:

    To this:

    Also, include the following code:

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

    #subHeader_8{

        width: 85%;

    }

    #header_8{

        font-size: 20px;

    }

    }

    Result: https://form.jotform.com/60757805082964 

    Let us know if you need more help.

  • Profile Image

    Answered by Hisidentity on March 17, 2016 at 11:37 AM

    Hello,

    Thank you for your suggestion, I really appreciate your quick response.

    I added the CSS you suggested and the issue still persists. @media screen and (max-width: 689px) It adjusts perfectly. But when I adjust my screensize to smaller it bounces back to @media screen and (min-width: 768px) and stays at that @media as I go smaller.

    I am attaching a screenshot of my screen at 480px. Thank you.

  • Profile Image

    Answered by Huberson on March 17, 2016 at 12:58 PM

    Hi,

    I checked your form - Volunteer Registration Form but could not reproduce the specified issue. Even at size lower than 480px the form still adjust to fit the screen size.

     

    The only thing I noticed is the date separators pushing the sub-labels to the bottom at screen size less than 480. You can fix it by adding the bellow CSS inside the '@media only screen and (max-width: 480px)' block.

     

    .date-separate{

        display:none;

    }

     

    To align the sub-labels with the textboxes use the following

    .form-sub-label{

        padding-left:6px;

    }

     

    If you still have this issue let us know. 

     

  • Profile Image

    Answered by Hisidentity on March 17, 2016 at 01:07 PM

    Thank you so much. It appears that it may be a template issue. The form itself appears to be responsive but on the website, that page is not responsive below 768px. I have contacted the developer of the theme to provide assistance. You have been very helpful, thank you.

  • Profile Image
    JotForm Support

    Answered by Charlie on March 17, 2016 at 01:15 PM

    Looks like this is a duplicate thread, I see you already have another thread with the same concern. It would be best to focus on one thread on one question to avoid confusion :) If you need our help again on this matter, please do post your reply on this link instead: http://www.jotform.com/answers/796335-. Thank you for your understanding.

  • Profile Image

    Answered by Hisidentity on March 17, 2016 at 05:46 PM

    Hi Charlie,

    Thank you. I had clicked on Contact Us and thought that it was sending a direct message to you guys not a post on the forum. Appreciate the assistance.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 17, 2016 at 05:58 PM

    No worries, I see that the issue was resolved on that post as well, so if you need further assistance open a new thread and we will be glad to help.