Image header not responsive

Hello, 

I'm just finishing a form that we have to launch next week. Everything is ok but the fact that the image header is not responsive. I made and uploaded an image 750x150px and everything is ok on PC and tablet. On mobile phone the image is "cropped".

I tried looking at the forum, someone suggest to add some CSS like:

@media screen and (min-width: 10px) and (max-width: 400px){
    img.header-logo {
        width:250px !important;
    }
}

@media screen and (min-width: 401px) and (max-width: 600px){
    img.header-logo {
        width:500px !important;
    }
}

@media screen and (min-width: 601px) and (max-width: 2400px){
    img.header-logo {
        width:750px !important;
    }
}

but it does not work. I also tried the deprecated "mobile responsive" widget but again, no luck.

Is the a way to fix this problem?

Also, is there a way to add a superscript text inside a label? I tried with  but it down not work.

Thanks for you help, Diego

Please remove the current custom CSS code you have added to your form and try to inject this custom CSS code into your form to fix the issue.

.form-all:before {

    background-size: 100% 140px !important;

}

Once you have added the custom CSS code, your form will look like this on mobile.

Thanks!
Now it works flawlessly!
I'll save your tip for my future forms. Grazie
Il 15 nov 2017 17:48, "JotForm" ha scritto:
...