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

    Mobile Responsive Widget + media query CSS causes the layout to not be responsive when viewed in ipad portrait mode

    Asked by hphanpeterson on October 07, 2014 at 12:24 PM

    Hi,

    I have my form embedded in a wordpress website using jquery script.

    Here's the link.

    http://salutecolorado.org/application/

     

    I have used the mobile responsive widget and in addition have the following media query:

     

    /*media queries*/

    @media only screen and (max-width: 40em){

    .progressBarContainer {

    position: initial;

    bottom: initial;

    }

    }

    The progress bar is initially at the bottom and the media query moves the progress bar to the top for devices with max-width:40em.

    It works fine, except that when I view the form in ipad portrait mode, the layout is not being responsive and the form extends out.

    Not sure what's going on. I really need this fixed ASAP as we need to launch the website.

    Also, please DO NOT add any code to my form css or remove any widgets(it was done once before by a support personnel).

    I would appreciate it if you would just tell me what to do and I will make the necessary changes.

    Thank you for your help.

    Page URL:
    http://salutecolorado.org/application/

    layout ipad not responsive Mobile progress bar media query mobile responsive iPad portrait mode
  • Profile Image

    Answered by Shadae on October 07, 2014 at 02:44 PM

    Hi hphanpeterson,

    I tested your form on an iPad in portrait mode and I have not been able to replicate the issue that you are describing regarding how the form displays when in portrait mode.

    However normally when there are responsive issues, occasionally using the iFrame embed method resolves it. Can you attempt to use the iFrame embed method to see if that resolves the issue that you are experiencing.

    Please inform us of the outcome. Thank you.

  • Profile Image

    Answered by Ben on October 07, 2014 at 02:54 PM

    Hi,

    Also, please DO NOT add any code to my form css or remove any widgets(it was done once before by a support personnel).

    I would appreciate it if you would just tell me what to do and I will make the necessary changes.

    I am sorry to hear that, we usually do not make any changes to the users jotforms without consent or if the users themselves were not able to do the same. Having said that I will try to help you with few comments.

    The progress bar is initially at the bottom and the media query moves the progress bar to the top for devices with max-width:40em.

    I would actually not recommend 40em to be used. The sole reason is that em is the font size so 1em is the 100% of the font size on the page, so 40 would be 40*size of the font. Now while that might be working for you when you assign the value on that specific device, on slight change of the font size it will cause the 40em to change its value as well.

    Now what I would suggest is changing that into max-device-width:800px like so

    @media only screen and (device-width: 768px)
    {
    .progressBarContainer
     {
       position: initial;
       bottom: initial;
     }
    }

    Now you should test it out.

    If you would like to make certain changes to the iPad portrait mode only (since all others seem to work for you and you do not want to change them), then you can apply this media query

    @media screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait)
    {
      .progressBarContainer
      {
        position:fixed;
        top:0;
      }
    }

    Do let us know if any of the two work the way you wanted, unfortunately I do not have iPad to test it out.

    Best Regards,
    Ben

  • Profile Image

    Answered by hphanpeterson on October 07, 2014 at 05:01 PM

    Hi Ben,

    Thank you for your reply.

    Actually, the problem in the portrait mode is not with the progress bar. Progress bar works the way I want it to.

    The actual problem in the portrait mode is the form layout. The form is wider and extends beyond the screen. It looks like its not following the rule,

    .form-all{

    max-width:100%;

    }

    Its almost as if it lost its padding! if that makes sense.

    Thanks again.

  • Profile Image

    Answered by Shadae on October 07, 2014 at 06:27 PM

    Hi, 

    Thank you for that information.

    Please add this code to your Media Query CSS to see if this will resolve the issue:

    .form-line {

    padding-left: 30px !important;

    padding-right: 30px !important;

    }

    The full code would look like this:

     

    @media only screen and (max-width: 40em){

    .progressBarContainer {

    position: initial;

    bottom: initial;

    }

    .form-line {

    padding-left: 30px !important;

    padding-right: 30px !important;

    }

     

    }

    I hope this helps. If you are still having an issue, please try using the iFrame embed code. Please inform us if you need further assistance.

  • Profile Image

    Answered by hphanpeterson on October 07, 2014 at 06:56 PM

    Tried the above code, no luck.

     

  • Profile Image

    Answered by Shadae on October 07, 2014 at 07:59 PM

    Hi,

    Thank you for that update, have you attempted to embed the code using the iFrame embed method?

    Look forward to hearing from you, to further assist you.