Form Cover mobile display height

Hello, the mobile display of my Form Cover is distorted in height. I've played with the CSS - adding 'height: 100px' or 'height: auto', but the former makes the Form Cover display full screen on mobile, and the latter makes the Form Cover disappear altogether. Your help is appreciated :)

Form: https://form.jotform.us/71776796324167

CSS:

.form-all:before {

    content : "" !important;

    background-image : url("https://www.jotform.com/uploads/anr3216/form_files/Healthcaresurvey.png") !important;

    display : inline-block !important;

    position : absolute !important;

    background-size : 100% 100% !important;

    background-repeat : no-repeat !important;

    width : 100% !important;

}

Please try injecting this custom CSS code below and see if this helps:

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

.form-all:before {

    height: 17% !important;

}

}

Here's should be the result after injecting the code:

Hope this helps.

Let us know if you need further assistance.
Regards.

Great. Unfortunately, the container for the Form Cover is now visible. How to I get rid of the grey space between the image and the start of the form?

Unfortunately, I was not able to remove gray space. 

As possible workaround you can use image field instead of the logo. 

On my cloned form I have removed CSS code that you added and I added this CSS code:

li#id_24 {

    padding: 0px!important;

}

Here is my demo form: https://form.jotformpro.com/71795307685974 

Feel free to test it and clone it. 

I will also ask my colleage Chriistian if he can find CSS code to remove gray space on your form with logo.

Thank you! Your solution worked just fine :)