Form cover image will respond to mobile size?

  • kevmountain
    Asked on June 22, 2016 at 7:24 AM
  • Ashwin JotForm Support
    Replied on June 22, 2016 at 10:33 AM

    Hello kevmountain,

    I am not sure if I have understood your question correctly. Please explain your question a bit more in detail and we will surely help you.

    We will wait for your response.

    Thank you!

  • kevmountain
    Replied on June 22, 2016 at 10:45 AM
    I can get the 'form cover image' to become responsive but this results in a large space between the form cover image and the body of the form.
    see attached image.
    _______________________
    KEV JONES
    kev@mountaindesign.co.uk
    07952 172 720
    ...
  • Charlie
    Replied on June 22, 2016 at 2:10 PM

    Unfortunately, if you are replying to this thread post using your email client and you are attaching images, the image won't go through here in the forum. 

    Please directly visit this thread using this link: https://www.jotform.com/answers/866559, then upload your screenshots using the image upload button in the reply area here.

    Form cover image will respond to mobile size? Image 1 Screenshot 20

     

    Regarding your concern, could you please try using this custom CSS code:

    @media screen and (max-width: 360px) {

        .form-all:before {

            max-height: 220px !important;

        }

    }

    @media screen and (max-width: 480px) and (min-width: 361px) {

        .form-all:before {

            max-height: 240px !important;

        }

    }

    @media screen and (max-width: 600px) and (min-width: 481px) {

        .form-all:before {

            max-height: 310px !important;

        }

    }

     

    .form-all:before {

        display: inline-block !important;

        background-size: 100% auto;

        background-repeat: no-repeat;

        background-position: top center !important;

        position: relative !important;

        top: 0;

        max-height: 363px;

        overflow: auto !important;

    }

    .form-all {

        margin-top: 0 !important;

    }

     

    You can check my cloned form here on how it works: https://form.jotform.com/61734977544973. You can clone it to see how it was setup and have a copy of it in your account.

  • kevmountain
    Replied on June 22, 2016 at 2:45 PM
    Thanks Cahrlie - great work - fantastic service.
    K
    _______________________
    KEV JONES
    kev@mountaindesign.co.uk
    07952 172 720
    ...