Mobile CSS: Form needs to adjust to mobile view

  • Profile Image
    tchomiak
    Asked on March 27, 2018 at 11:09 AM

    I need help adjusting my form for mobile view.  Looks great in desktop, but its off center on mobile.  Form: https://form.jotform.com/80845884093165

    1522163238ss1.jpg

    1522163289SS3.jpg

  • Profile Image
    aubreybourke
    Answered on March 27, 2018 at 12:27 PM

    You can try adding this CSS code:

    @media screen and (min-width: 10px) and (max-width: 640px){

    .jotform-form {

        margin: 0px !mportant;

        padding: 0px !important;

      }

    .form-all {

        width: 100% !important;

      }

    }

    How-to-Inject-Custom-CSS-Codes

     

     

    It should look like this:

     

    1522167981ugthw.png

    https://form.jotform.com/80854479037971

     

  • Profile Image
    tchomiak
    Answered on March 27, 2018 at 12:52 PM

    I am getting an rbrace error when putting in the CSS

    1522169547Screen Shot 2018-03-27 at 11.5

  • Profile Image
    tchomiak
    Answered on March 27, 2018 at 12:55 PM

    Here is the error I am seeing

    1522169696Screen Shot 2018-03-27 at 11.5

  • Profile Image
    aubreybourke
    Answered on March 27, 2018 at 01:00 PM

    Its not a brace. The first !important keyword is missing an 'i' character

    It should look like this:

    @media screen and (min-width: 10px) and (max-width: 640px){

    .jotform-form {

        margin: 0px !important;

        padding: 0px !important;

      }

    .form-all {

        width: 100% !important;

      }

    }

  • Profile Image
    tchomiak
    Answered on March 28, 2018 at 01:08 PM

    Thanks works great!!