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 make Header Image responsive in mobile devices?

    Asked by MomentsDBS on January 11, 2017 at 11:15 AM

    Hi there,

    For my form "The Budget Pledge", I am trying to align my header image center but cannot due to the option only allowing my image to align left or right. Could you please advise me on how I may find the central align option? Scoured several help threads and all of them state that I am supposed to have this option available to me. Not sure what I'm missing out.

    Thanks for the help!

    Marcus

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Jan on January 11, 2017 at 01:13 PM

    Upon checking, I can see that the image is already at the center of the form. Here's a screenshot:

    It is possible that you were able to resolved this issue by yourself. If you're still having issues, let us know. Thank you.

  • Profile Image

    Answered by MomentsDBS on January 11, 2017 at 08:09 PM

    Thank you for your quick reply. 

    It aligns on the website, but does not seem to align when viewed on mobile. I've already included the mobile optimisation plugin but it still does not align. 

    How should I go about resizing this without compromising its layout on web? 

    Thank you!

  • Profile Image
    JotForm Support

    Answered by olivia on January 12, 2017 at 02:45 AM

    Hi,

    I have checked your form responsiveness. Responsiveness of other form fields seems good in your form except Header Image. Please have a look at the following video:

     

    To fix this issue, we need to inject some CSS into your form. Please copy and paste the below CSS into your form:

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

        /* For mobile phones: */

    .header-logo{

            width: 100%;

                             }

        img.header-logo-left {

            width: 100%;

                             }

    }

    Have a look at this guide about How-to-Inject-Custom-CSS-Codes.

    As you see above, we used @media query to specify the width of the Header Image for mobile devices.

    After this, your form will be seen in mobile devices like below:

    You can have a look at the following website for more detailed information about responsive design and media query: http://www.w3schools.com/css/css_rwd_mediaqueries.asp 

    If you need any other supports, please don't hesitate to contact us.

    Thank you.

  • Profile Image

    Answered by MomentsDBS on January 12, 2017 at 05:06 AM

    Dear Olivia, 

    This works perfectly! 

    Thank you so much for your help and your prompt assistance.