Need help making header image mobile responsive

  • glennmark_ph
    Asked on May 2, 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.

  • Charlie
    Replied on May 2, 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.

    Need help making header image mobile responsive Image 1 Screenshot 20

     

    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.

  • GraceMarComm
    Replied on May 2, 2016 at 4:12 PM

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

     

  • victor
    Replied on May 2, 2016 at 6:28 PM

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

    Need help making header image mobile responsive Image 1 Screenshot 30

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

    Need help making header image mobile responsive Image 2 Screenshot 41

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