Gravity Forms Time Field Formatting Incorrectly

Beaver Builder
1

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): http://mauiweddingcakes.flywheelsites.com/ordering/cake-tastings/

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!

mwc-time-form
mwc-time-form2164×1936 206 KB

2

Use the following CSS

li label.gfield_label {
margin-bottom: 0;
}
3

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?

4 
.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
5

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

6

Glad it works. :wink:…

1 Like
7

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

8

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

9

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)d-tales.xyz