Form Cover mobile display height

  • Profile Image
    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-all:before {

        content : "" !important;

        background-image : url("") !important;

        display : inline-block !important;

        position : absolute !important;

        background-size : 100% 100% !important;

        background-repeat : no-repeat !important;

        width : 100% !important;


  • Profile Image
    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.

  • Profile Image
    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
    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: 

    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
    Answered on June 29, 2017 at 03:52 PM

    Thank you! Your solution worked just fine :)