How to make my header thinner?

  • Profile Image
    ptkaliber
    Asked on November 16, 2021 at 12:51 PM

    1637084971_6193ef2b56d2e_Screenshot 2021

    I need at least 1/3 of the current size. Please help.

    https://form.jotform.com/213190244377454


  • Profile Image
    Laura
    Answered on November 16, 2021 at 04:26 PM

    Hi,

    You can use the following CSS code to change the header size:

    .form-header-group {
    width: 200px;
    height:50px;
    }


    Adjust the size to your liking by changing the numbers.
    Here is how you can add CSS to your form:
    How-to-inject-custom-css-codes

    Let us know if you need further assistance.

  • Profile Image
    ptkaliber
    Answered on November 17, 2021 at 02:26 AM

    Thanks for the feedback. but how do i make the words stay floating in the middle


    this one is no good


    1637134011_6194aebb7a3d0_

  • Profile Image
    Richie
    Answered on November 17, 2021 at 07:20 AM

    You can try adding this custom CSS

    .form-header-group .form-header {
       margin-top: -10px;
    }

    Guide:https://www.jotform.com/help/117-how-to-inject-custom-css-codes/

    Let us know how it goes.

  • Profile Image
    ptkaliber
    Answered on November 20, 2021 at 01:37 PM

    can you give the full css. i did mine but didnt work

    1637433437_6199405d1984d_1637433461_619940751a420_

  • Profile Image
    Ahmed
    Answered on November 20, 2021 at 02:36 PM

    Greetings,

    Yyou may use this CSS code instead of the existing one, the output will be as the below screenshot.

    .form-header-group{
      height: 40px;
      padding: 10px;
    }

    You may change the values to be height: 50px and padding: 15px or height: 30px and padding: 5px, also you can add width property if you wish.

    1637436725_61994d3521c20_5.png

    Please let us know if you need further assistance, we are happy to help.

  • Profile Image
    ptkaliber
    Answered on November 21, 2021 at 11:44 AM

    1637512887_619a76b7c9e56_

    please help. i want to remove the space and make my table fit so i dont need to zoom out to see whole table on preview phone

  • Profile Image
    Ahmed
    Answered on November 21, 2021 at 01:05 PM

    Greetings,

    Please try to modify the width option of the table and the column from the properties of the Input Table as you can see in the below screenshot.

    1637517719_619a89974c591_3.pngPlease give it a try and let u know if you need further support.