Form is not mobile responsive

  • Profile Image
    skatch
    Asked on December 03, 2015 at 04:43 AM

    I have exactly the same issue. It is not noticeable on desktop, but when running on mobile, particularly in portrait mode, the form is clearly shifted to the right:

    https://form.jotform.me/53341980197461

    Width is set to 100%, so that can't be it.

    Any help greatly appreciated!

  • Profile Image
    Jan
    Answered on December 03, 2015 at 06:02 AM

    I can see that there is a problem with the buttons on your form when I view it on smaller devices. Here's a screenshot:

    Please use this custom CSS code that targets mobile screen devices.

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

    .form-pagebreak {
    margin: 0 0 !important;
    }

    .form-all .form-pagebreak-back-container, .form-all .form-pagebreak-next-container {
    width: 280px !important;
    }

    .form-pagebreak-next-container {
    padding: 0 !important;
    }

    .form-pagebreak-back-container {
    padding: 0 !important;
    }

    .form-all .qq-upload-button, .form-all .form-submit-button, .form-all .form-submit-reset, .form-all .form-submit-print {
    width: 280px !important;
    padding: 0 !important;
    }

    }

    Here's a guide on how to inject custom CSS on your form. Here's the result:

    Hope this helps. Let us know if you have any questions. Thank you.

  • Profile Image
    skatch
    Answered on December 03, 2015 at 10:14 PM

    Hey Jan,

    Thanks a lot for the prompt response. This workaround only solves the issue in the simulator but not on my actual Android test device (galaxy A8) (I suppose it is because it has a higher-res screen).

    However, your answer made me realize that this "right shifting" bug is indeed related only to the buttons (i.e., not the entire form), AND, it only occurs when the buttons exceed a certain width.

    ==> By not exceeding a certain button width (around 280 pixels maybe), the buttons appear centered, i.e., no right shifting bug.

    So, I am happy enough : ).

    Thanks again.

      

  • Profile Image
    Charlie
    Answered on December 04, 2015 at 02:50 AM

    In behalf of my colleague, you are welcome. And thank you for sharing us your findings on this, other users might see your post helpful if they encounter a similar case.

    If you need any assistance again, please do not hesitate to open a new thread here in the forum.

    Cheers!