JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Need help making header image mobile responsiveAsked by glennmark_ph 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.
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:
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.
It does decrease the size when adjusting window width but the image gets distorted. Doesn't maintain its proportions.
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.