Well after much frustration, I have some advice for those of you noticing there is a large gap between the labels and the text boxes. I am assuming you used "tight" format. First the css file you want to use is in components/com_chronoforms/css/frontforms_tight.css.
Now when I got to the above file, I did not know what line to use so I used a little trick I learned. What you do is use "background: yellow", or something like that, and insert it in the line you are investigating. You then look at your form and see which element feature turned yellow. Doing that helped me find line 25 was responsible for the big gap. Here is the line in question.
line 25.cfdiv_text label { width: 150px}.
I found that if you change the width, a long label will not fit correctly. But if you color the space with something like #fofofo, the gap looks better. You can also play with padding changes to see if that helps.
You should also look at line 10 .ccms_form_element input, textarea, input[type="file"] {padding: 4px !important; border: 1px solid #d3d3d3; margin-bottom: 3px; } Try putting a negative margin-left and see what happens. Anyway, hope that helps.
Now when I got to the above file, I did not know what line to use so I used a little trick I learned. What you do is use "background: yellow", or something like that, and insert it in the line you are investigating. You then look at your form and see which element feature turned yellow. Doing that helped me find line 25 was responsible for the big gap. Here is the line in question.
line 25.cfdiv_text label { width: 150px}.
I found that if you change the width, a long label will not fit correctly. But if you color the space with something like #fofofo, the gap looks better. You can also play with padding changes to see if that helps.
You should also look at line 10 .ccms_form_element input, textarea, input[type="file"] {padding: 4px !important; border: 1px solid #d3d3d3; margin-bottom: 3px; } Try putting a negative margin-left and see what happens. Anyway, hope that helps.