3 Fields in a Line but really close to eachother

[Fairsuchen (Alexander Jessen)]

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

Thanks for your Support

[chrishajer (Chris (Gravity Forms))]

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.

[Fairsuchen (Alexander Jessen)]

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 )
https://www.carfit-hamburg.de/eingangskontrolle-2/

[chrishajer (Chris (Gravity Forms))]

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?

[Fairsuchen (Alexander Jessen)]

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.

[chrishajer (Chris (Gravity Forms))]

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

[EliasGomez (Elías Gómez)]

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

Modifying Field Layout with CSS Ready Classes

[user5c0166073a6c48.6 (Gravity Bot)]

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

Desktop

Mobile

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!