Mobile CSS: Form needs to adjust to mobile view

  • 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 Screenshot 10

    1522163289SS3 Screenshot 21

    Jotform Thread 1427134 Screenshot
    Page URL: https://form.jotform.com/80845884093165
  • aubreybourke
    Replied 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 Screenshot 10

    https://form.jotform.com/80854479037971

     

  • tchomiak
    Replied 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 Screenshot 10

  • tchomiak
    Replied on March 27, 2018 at 12:55 PM

    Here is the error I am seeing

    1522169696Screen Shot 2018 03 27 at 11 Screenshot 10

  • aubreybourke
    Replied on March 27, 2018 at 1: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;

      }

    }

  • tchomiak
    Replied on March 28, 2018 at 1:08 PM

    Thanks works great!!