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

  • Profile Image
    Hisidentity
    Asked on March 16, 2016 at 05:32 PM

    I have created my form based on a registration form 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?

  • Profile Image
    BDAVID
    Answered 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
    Hisidentity
    Answered 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
    Huberson
    Answered 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
    Hisidentity
    Answered 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
    Charlie
    Answered 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
    Hisidentity
    Answered 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
    Kevin_G
    Answered 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.