Need 1 or 2 character field added to last row on form that displays correctly on an ipad

I need to add a 1 or 2 character wide field on the same bottom row of a form that has a Submit  and Print button on it. It must display correctly on an IPad and desktop computer and not have any impact on the Submit or Print buttons, which will be on the same row. The field is intended “for official use only” and can not cause the form to be any longer than it is now so that when it is printed, the Amount field will appear on the first page of the print out.

The odd thing is my attempt (see my Build) looks close, but my Publish is awfull. The Submit  and Print buttons are affected and I can’t get the new “official use” field to be only 1 or 2 characters long, even using CSS code.

Can you help?

i tried to include a screenshot, but this message became too long to send.

Thanks

Mike

PS I just tested my form on a desktop and except for the size of the new field, it displays correctly. So my main problem is when I Publish on an IPad.

I'm not sure I understood your question correctly, but I have moved the " for Official use only" below the Print form when viewed on an IPad.

Here is the custom css code:

@media(max-width:1290px) and (min-width:766px){
  #id_28{
        margin-top: 70px;
    margin-left: -130px!important;
  }
  .form-all{
    height:980px!important;
  }

}

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

Screenshot:

Please try the custom css code and let us know how it goes.

Thank you.

Your code made all of my fields too long.
I also need the "Number of Children under 6" input field to be the same
size as the
the input field for "Number of Children age 6-12 at $5 ea".
and
I would like the "Official use" input field to be smaller.
This view is the "Build" view and "Publish" view on my desktop. On my Ipad,
it is totally wrong.
This is what I need. It should look the same on desktop and on an Ipad.
The image below is what it looks like on my Ipad. The official use field is
...

I checked the form again and the "Number of children under  6" and "age 6-12" input fields are the same size.

Your screenshot did not go through, kindly follow this guide -How-to-add-screenshots-images-to-questions-to-the-support-forum

Thank you.

Yes but they are not the fields I am referring to.
The new field "*Number of Children under 6* (*No charge*) is to long. I
need it to be the same size as the field on its left.
Also the field names "*official use*" is too long and is overlaying the
print button on an IPad. (It is ok on a desktop, but when I added your
suggested code from before, all the fields on the form became too long so I
had to remove your suggested code.
Mike
...

I hope I sent to you the correct link.
This is the one I am referring to:
https://form.jotform.com/80923886056163
Mike Enriquez
...

Thank you for the added information, I have updated the custom css codes.

#input_29{
  width:50px!important;
}
@media(max-width:1290px) and (min-width:766px){
  #id_12{
     margin-bottom: -30px!important;
 
  }
  #text_20{
    margin-top: -20px!important
    ;
  }
 
#id_21{
  margin-top: -40px!important;
}
#id_28{
  margin-left: -150px!important;
    margin-top: 18px!important;
}

}

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

Please give it a try and let us know how it goes.