Mobile responsive forms using custom CSS codes

  • Profile Image
    elektrahealth
    Asked on April 12, 2020 at 06:37 PM

    Hello – I am trying to make two of my forms mobile responsive but they look terrible on mobile. Is there someone that can help me? Here is what one of our developers put into the CSS but it's not helping. Also the "next" button appears halfway off screen (I made it right justified). Is there someone who can help? Here are the two forms:

    https://hipaa.jotform.com/200934716103144

    https://hipaa.jotform.com/200934716103144

    @media screen and (max-width: 480px), screen and (max-device-width: 767px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape){

    /*.form-button-error {

    background-color : #000072;

    position : fixed;

    z-index : 50;

    top : 0px;

    }

    What's the best way



    This is a re-post of a comment on Deprecated: How to make mobile friendly forms on JotForm

  • Profile Image
    jonathan
    Answered on April 12, 2020 at 07:33 PM

    I made adjustments and corrections in the CSS codes used on your form. Can you please check/test again the form in your mobile browser. 

    The page break elements on the form should now be aligned.

    1586734357zzz 2020-04-13 07.31.46.png


    Please let us know if you need further assistance.

  • Profile Image
    elektrahealth
    Answered on April 13, 2020 at 12:28 PM

    Thank you for this! I realized that I forgot to send the second form that needs help!

    Form 2: https://hipaa.jotform.com/200934521403141 (needs correction)
     
    Thank you!
  • Profile Image
    Richie_P
    Answered on April 13, 2020 at 02:17 PM

    You may add this custom CSS in your form.


    @media screen and (max-width: 480px) {
    .form-pagebreak-next-container{
    margin-left: auto;
    width: auto !important;

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

    Please give it a try and let us know if the issue still remains.