CSS: How to remove borders of Header & How to change Header and Sub-header fonts?

  • Profile Image
    hallberg.architect
    Asked on August 01, 2020 at 04:56 PM

    I was surprised to see horizontal borders in my header after cloning another form of mine that did not have them. How do I get rid of them? I unchecked the border box in the advanced builder but it didn't remove them.

    Also, I want to use one font for headers and subheaders, and another for text body. What to put in css editor?

    thank you!

  • Profile Image
    Amin_N
    Answered on August 01, 2020 at 07:16 PM

    The form in question has no horizontal borders.

    Are you referring to the Header borders shown below?

    1596322891screenshot-form.jotform.com-20

    If so, kindly note that you can remove them by injecting the following CSS code into your form:

    .form-header-group{
       border-bottom: 0px;
       border-top: 0px;
    }

    Result:

    1596323684Screenshot_2020-08-02 Fish Chi

    Related guide: How-to-Inject-Custom-CSS-Codes

    My demo form: https://form.jotform.com/202137015265950

  • Profile Image
    Amin_N
    Answered on August 01, 2020 at 07:25 PM

    To change the font family of Sub-headers only, kindly inject the following CSS code into your form:

    #subHeader_85{
     
      font-family: Sans-Serif
    }

    Note that every Sub-header has a unique CSS ID.

    Result:

    1596324279screenshot-www.jotform.com-202Does this answer your question?