How to make my header thinner?

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

    1637084971 6193ef2b56d2e Screenshot 2021 Screenshot 10

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

    https://form.jotform.com/213190244377454


  • Laura JotForm Support
    Replied on November 16, 2021 at 4: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.

  • ptkaliber
    Replied on November 17, 2021 at 2: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  Screenshot 10

  • Richie JotForm Support
    Replied on November 17, 2021 at 7: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.

  • ptkaliber
    Replied on November 20, 2021 at 1:37 PM

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

    1637433437 6199405d1984d  Screenshot 101637433461 619940751a420  Screenshot 21

  • Ahmed_S
    Replied on November 20, 2021 at 2: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 Screenshot 10

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

  • ptkaliber
    Replied on November 21, 2021 at 11:44 AM

    1637512887 619a76b7c9e56  Screenshot 10

    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

  • Ahmed_S
    Replied on November 21, 2021 at 1: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 Screenshot 10Please give it a try and let u know if you need further support.