What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

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.


  • Profile Image

    How to adjust header image for mobile?

    Asked by rsingleton403 on April 02, 2015 at 02:50 PM

    How do I get my header image to adjust for mobile settings?

    Thanks.

     

    Page URL:
    http://jotformpro.com/form/50776782036967

    Mobile adjust settings thanks
  • Profile Image

    Answered by Syed on April 02, 2015 at 03:13 PM

    Hi there;

              Please Clone this form, Header Image is adjusted for mobile devices. If you need more adjustments to Header Image, please will let us know. We would be happy to assist you :)

     

    Kind Regards;

    - Syed

  • Profile Image

    Answered by rsingleton403 on April 02, 2015 at 04:11 PM

    Cloning did not solve problem.  See view on mobile:

    http://jotformpro.com/form/50915816459969

  • Profile Image

    Answered by raul on April 02, 2015 at 06:34 PM

    Try to enable the mobile responsiveness in your form using the form designer.

    And inject the following CSS code:

    .form-image {
       max-width : 95% !important;
    }

    @media screen and (max-width: 480px) {
       .form-image {
           max-width: 85% !important;
       }
    }

    This should be the result:

    You may also try to change the width values to the ones you prefer.
    Let us know if this helps.

  • Profile Image

    Answered by rsingleton403 on April 07, 2015 at 10:03 AM

    I tried this and it only increased the space between fields.  Plus, when I change the code it changes the background to this horrible gray.

    I have re-cloned http://jotformpro.com/form/50963831320956

    I just need the header and footer images to adjust in mobile view.

     

  • Profile Image

    Answered by raul on April 07, 2015 at 11:30 AM

    Take a look at this cloned version of your form: http://form.jotformpro.com/form/50964430703957

    I've added the mobile responsive widget to it and made some CSS modifications and it worked correctly on my side. If it works ok on yours, feel free to clone it to your account.

    Thank you.

  • Profile Image

    Answered by rsingleton403 on April 07, 2015 at 11:55 AM

    Yes, that works.  Can you please share the steps you used to effect these changes so that I can modify my other forms?  Thanks.

  • Profile Image

    Answered by raul on April 07, 2015 at 12:13 PM

    Sure, as mentioned before I added the mobile responsive widget to the form.

    Then, I used an image field to render the header image (it was embedded in a Text field in the original version of your form).

    And finally, I added the following CSS code to the form:

    .form-image {
    max-width: 100% !important;
    }

    If you need our help with your other forms, don't hesitate to let us know and we'll be happy to assist.

  • Profile Image

    Answered by rsingleton403 on April 07, 2015 at 01:53 PM

    I was able to make that work with just the widget and rendering image into an image field.

    What does the code do, and how do I insert it?  I know how to go to preferences and form styles.  Do I replace what is already in the inject custom css box?  Or how do I add it?

    Thanks

  • Profile Image

    Answered by raul on April 07, 2015 at 02:01 PM

    The code is to make sure that the width of the image do not overpass the width of the containing div.
    You can add it at the bottom of the code that's already there, you don't need to replace your current code.