Gravity Forms Time Field Formatting Incorrectly

Hey All,

I’m having trouble getting the time field of a form (Gravity Forms) to display correctly. The fields for hours and minutes are too small and the colon is pushed down to a new line.

See an example here (scroll down to form):

Screenshot attached, too.

I’m using the PowerPack Add-On for some form styling as well.

It seems like a CSS issue, but I’ve hit the limit of my capabilities. Can someone take a look and help? Thanks!

Use the following CSS

li label.gfield_label {
margin-bottom: 0;

Thanks for taking a look! The CSS did help align the fields some but it doesn’t fix the location of the colon. Hmm any other ideas?

.gform_wrapper .gfield_time_hour {
	display: flex;
	align-items: center;
.gform_wrapper .gfield_time_hour input {
	margin-right: .25em;
.gform_wrapper .gfield_time_hour i {
	margin-top: 0;
1 Like

@avanti that’s exactly what I needed. Thank you so much!

Glad it works. :wink:

1 Like

Hi avanti,
please let me come back on this. After applying the css that worked for jlevitt, it looks like this:
Any chance you can sort this out as well?
Thanks in advance!
Kind regards,

Debugging a screenshot…?
No chance, a web page is made of code, you know.

LOL sure I know. I just was hesitating to come back after 7 months. If you’re willing to dive into this, I would like to send you the credentials for the protected development site. abc(at)