How to change stlye formatting on header field?

  • Profile Image
    Georgeff
    Asked on April 16, 2019 at 02:41 PM
  • Profile Image
    Richie_P
    Answered on April 16, 2019 at 04:11 PM

    I have checked your form and you have used the Header to place your text.

    If you want to copy how the field in your "Payment for Software and services" aligned, you must use the Text element.

    Please give it a try and let us know if this fits your requirements.



  • Profile Image
    Georgeff
    Answered on April 17, 2019 at 09:07 AM

    I like the formatting of the Header element better than the formatting of the Text element. Is it possible to use the Text element to create the same look that my Header element now has with text and line spacing?

  • Profile Image
    Richie_P
    Answered on April 17, 2019 at 10:20 AM

    You may add this custom CSS in your Form.


    .form-html ul {
     
        line-height: 1.5em;
        font-size: 1.071em;
    }

    Guide:-How-to-Inject-Custom-CSS-Codes

    Please give it a try and let us know if this fits your requirements.

  • Profile Image
    Georgeff
    Answered on April 17, 2019 at 10:36 AM

    Thank you, that helped the line spacing, but can you also make the font in the bottom box match the top box. I like the top box font the best. Thank you.

    1555511766font types.jpg

  • Profile Image
    Richie_P
    Answered on April 17, 2019 at 12:04 PM

    I have checked the HTML and it seems that both are using the same font family and font-style.

    font-family: Lucida Grande, sans-serif;
    font-style: normal;

    Hope this information helps.

    If you need further assistance, let us know.

  • Profile Image
    Georgeff
    Answered on April 17, 2019 at 12:44 PM

    Thanks for checking. They sure look different to me. Here is another question...

    1555519471reducespace.jpg

  • Profile Image
    Richie_P
    Answered on April 17, 2019 at 01:52 PM

    I inspected the HTML element of your form to show the CSS rule used for the font and font-family.

    Here is a screenshot:

    You may use this custom CSS to adjust the space between the header and Text element.

    .form-subHeader{
    margin-bottom: -40px;
    }


  • Profile Image
    Georgeff
    Answered on April 17, 2019 at 02:18 PM

    Thank you for looking into this. I am not sure how to get to where you were and then wouldn't know if I paste that code on top of, or before or after some other text.Is it possible that you could paste it in there for me? That would be much more efficient use of your time that to try to explain it to me, I think. Thank you.

  • Profile Image
    Richie_P
    Answered on April 17, 2019 at 03:45 PM

    I went ahead and added the CSS in your form.

    For future reference, you may add the CSS after the end ( } )code or bracket.

    Sample:

    .form-html ul {
     
        line-height: 1.5em;
        font-size: 1.071em;
    }

    .form-subHeader{
    margin-bottom: -40px;
    }

    Hope this information helps.



  • Profile Image
    Georgeff
    Answered on April 17, 2019 at 03:51 PM

    Thank you for explaining that and for doing it, too. I really appreciate it.