I'm trying to change the amount of space between the input box and the label underneath.
If you look at the form on this page: http://www.newvideo.com/apple/ the work First is a little too far away from the box. And it because especially confusing in the address field where the 'address 2' label is close to two of the input fields.
Thanks!
I'm not seeing your problem. I checked in several browsers. What browser are you seeing this issue in?
If you want to tweak your sub-label positioning, you can easily target them to apply new properties with CSS. Here's a guide to show you how to target the specific elements in the advanced field groupings. You'll see examples for sub-labels there as well.
http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/#advanced
Here is an example:
http://www.newvideo.com/wp-content/uploads/2011/02/example.jpg
I know it's super nit-picky but i'd like to get rid of the space that is highlighted in orange.
You can add this to your theme stylesheet and tweak it to your preference. It will target all of the sub-labels in the advanced fields.
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label,
body .gform_wrapper .gform_body .gform_fields .gfield .instruction {margin:0 0 3px 0}
placson
Member
Hi Kevin,
I tried adding that to the end of my style.css and it didn't work. Here's my URL
http://www.warriorsquest.net/tournament/registration/
I'd also like to decrease the gap between label and field. (I"m on Chrome and Firefox on Linux)
I don't see it at the end of your style.css file. When it's added it works just fine in my tests.
I copied your page markup and added the styles inline here.. I adjusted the line height as well.
[css]
body .gform_wrapper .gform_body .gform_fields .gfield .ginput_complex label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_hour label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_time_minute label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_month label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_day label,
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_date_year label,
body .gform_wrapper .gform_body .gform_fields .gfield .instruction {
margin:0 0 2px 0;
line-height: 1
}You should be able to add that to the end of your style.css file and see the changes.
My pleasure. Glad that helped you out.