Form Cover mobile display height

  • Profile Image
    anr3216
    Asked on June 29, 2017 at 01:59 AM

    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;

    }

  • Profile Image
    Chriistian
    Answered on June 29, 2017 at 03:47 AM

    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.

  • Profile Image
    anr3216
    Answered on June 29, 2017 at 11:26 AM

    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?

     

  • Profile Image
    BJoanna
    Answered on June 29, 2017 at 02:19 PM

    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.

  • Profile Image
    anr3216
    Answered on June 29, 2017 at 03:52 PM

    Thank you! Your solution worked just fine :)