3 Fields in a Line but really close to eachother

Hi, how can i get the 3 field closer to each other?

Thanks for your Support

Can you change the field with to Large for those fields on the Appearance tab?

Also, can you share a link to the page on your site where we can see this form with your theme? Thank you.

Hi Chris,
first of all - thanks for picking up my topic.

The reason it looks funny with the big width between is: i switched to small.
I now have midium aktivated, and i want to remove the space inbetween.

The challenge is:
i need only 3 to 4 digits per field.

So on an Desktop it is too large, on mobile it breaks to next line (because there can be stored 15 plus X digitis in the field )

If i can shrink the witdth of the field to 3 Digits, all is okay.

Here you find the Form with placeholder as it shoul be ( even from the max number of digits per field )

If you only want it wide enough for three or four characters, that means you do not want the inputs wider? What would you like to fill the space between the fields with?

Thank you for your reply.
I want on Mobile Device that the 3 fields are presented in line, without an break.
Inbetween could be a “-” or a small space.

And on a desktop, or wider screen, what should happen?

How did you do the 3 columns layout? I’d use the gf_inline CSS class:

I think this is what you are wanting. (see screenshots)



Here’s CSS

.gform_wrapper.gravity-theme .gfield input.medium {
  width:  100%;

@media only screen and (max-width: 675px) {
  .gform_wrapper.gravity-theme .gfield input.medium {
    width: 70% !important;

@media only screen and (max-width: 640px) {
  .gform_wrapper.gravity-theme .gfield:not(.gfield--width-full) {
    grid-column: 5/-23 !important;
    width: 136% !important;

@media only screen and (max-width: 675px) {
	.gform_wrapper.gravity-theme .gform_fields {
		display: inline-flex;

@Fairsuchen let me know, I’ll keep the form I built to replicate your form just in case I misunderstood. Hopefully, that’ll do the trick!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.