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

    Header with header logo being cut off on mobile devices

    Asked by PAL_Connie on March 14, 2017 at 02:15 PM

    Hi

    I added header on page 1, but when viewing on mobile, it was cut out. I think it's not mobile responsive. Can you please help. 

    Also the words "Email" and "Web" should show in the new row. 

     

    Thanks

    Connie

    Page URL:
    https://form.jotform.co/70664963900865

    Screenshot
  • Profile Image
    JotForm Support

    Answered by Mike_G on March 14, 2017 at 03:56 PM

    It seems that adding a logo in the header would not have the header texts (main and sub) to appear in a separate line.

    To fix the issue, you can add the following CSS codes below to your form:

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

      .form-header-group.hasImage>.header-text{

        display: block !important;

      }

      .form-header-group.hasImage>.header-logo{

        display: block !important;

      }

    }

    To learn how you can inject CSS codes to your form, please see this guide: How-to-Inject-Custom-CSS-Codes

    Adding the codes will have the header texts (main and sub) placed under the logo on mobile devices.

    If you want to have the logo and the header texts (main and sub) aligned to the right, you can add the CSS codes below in addition to the CSS codes above.

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

      .form-header-group.hasImage>.header-logo {

        text-align: right !important;

      }

      .form-header-group.hasImage>.header-logo img {

        margin-right: 0px !important;

       }

    }

    However, if you want it aligned to the left you can add the CSS codes below instead.

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

    .form-header-group.hasImage>.header-text {

        display: block !important;

        text-align: left !important;

    }

    I hope this helps. If you have any further questions regarding this, please feel free to contact us again anytime.

    Thank you.

  • Profile Image

    Answered by PAL_Connie on March 14, 2017 at 06:46 PM
    Many thanks. 😊
    ...