How to make my form view in mobile responsive?

I added this to the CSS and my form is still wider when viewed sideways on mobile. 

.form-all {

    width: 320px !important;

    margin-left: auto !important;

    margin-right: auto !important;

}

You can try adding  media css codes to enable responsive view.

@media screen and (max-width: 767px) and (min-width: 480px){
  .form-all {
    width: 320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
}

Here is a guide on how to inject custom css.

How-to-Inject-Custom-CSS-Codes

Added that CSS and it still does not work.
...

I have cloned your form and it seems you have added the css codes to a comment(/**/). That is why the code is not working.

Kindly place the css code after the } end bracket and make sure it will change color.