CSS media screen not taking when added to the custom css section.

I'm trying to style these forms for mobile use. The css section doesn't seem to be taking to the style code I'm adding. 

@media (max-width: 400px) {

.form-line.form-line-column {margin: 4px 4px 4px 10px!important;width: 91%!Important;}

textarea#input_27 {  min-height: 80px!Important;}

}

Here is the form itself: 

Try injecting this code instead: 

@media only screen and (max-width:400px){

.form-line.form-line-column {

    margin: 4px 4px 4px 10px!important;

    width: 91%!Important;

    }

    textarea#input_27 {  

        min-height: 80px!Important;

        }

}

Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

Result: 

I would recommend you to also use the Google developer tools to view the results, the preview page may not be accurate. 

I hope this helps.