Image header not responsive

  • Profile Image
    dimarche1975
    Asked on November 15, 2017 at 10:28 AM

    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 <sup></sup> but it down not work.

    Thanks for you help, Diego

  • Profile Image
    Chriistian
    Answered on November 15, 2017 at 11:48 AM

    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.

    15107644342017-11-16_0046.png


  • Profile Image
    dimarche1975
    Answered on November 15, 2017 at 12:43 PM
    Thanks!
    Now it works flawlessly!
    I'll save your tip for my future forms. Grazie
    Il 15 nov 2017 17:48, "JotForm" ha scritto:
    ...