Need help making header image mobile responsive

  • Profile Image
    glennmark_ph
    Asked on May 02, 2016 at 11:02 AM

    Is there something specific to set up with the mobile responsive widget. I installed it and could not get it to work with our header image.

  • Profile Image
    Charlie
    Answered on May 02, 2016 at 12:46 PM

    Could you check if this cloned form that I have has the mobile responsiveness that you like: https://form.jotform.com/61224586592966. You can clone my form to have a version of it in your account. Here's how you can clone it: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    If that's correct, this is how I did it:

    1. In the "Form Cover" section in your Form Designer Tool, make sure to set the width to the same size of your form, in your case, it should be 690px. After that, make sure that the position and top position is set to center.

     

    2. After that, paste this custom CSS code in your form:

    .form-all:before {

        content : "" !important;

        background-image : url("https://www.jotform.com/uploads/glennmark_ph/form_files/SubscriptionPageHeader.png") !important;

        display : inline-block !important;

        height : 132px !important;

        position : absolute !important;

        background-size : 100% 100% !important;

        background-repeat : no-repeat !important;

        width : 100% !important;

    }

     

    Let us know if that works.

  • Profile Image
    GraceMarComm
    Answered on May 02, 2016 at 04:12 PM

    It does decrease the size when adjusting window width but the image gets distorted. Doesn't maintain its proportions.

     

  • Profile Image
    victor
    Answered on May 02, 2016 at 06:28 PM

    Since you are using the form cover for the image header:

    You require to add the CSS code provided by my colleague in the CSS tab

    When reviewing the form, I was not able to locate this code.