Can't get the spacing on this form right

[artlessink]

I’m adding CSS to a gravity form alternating between 1, 2, and 3 fields per row.

I’ve been able to center the form header with the form container. However the the text fields will not line up evenly.

I’m using the Gravity forms short code gf_left_half and gf_left_third etc for the rows containing 2 and 3 fields. However they will not properly populate the form as specified.

Here is the CSS that I’m using

[MOD EDIT – Codedump removed]

[Paulie_D]

Please a CSS codedump is no use to anyone especially without the associated HTML.

A Codepen.io demo is much more valuable.

[artlessink]

Thank you for the advice, made things 10x easier!

I’ve created a codepen which can be viewed under my codepen user name, “artlessink”.

I’m aiming to accomplish a form rendered with 2 fields on the first row, 2 fields on the second row, 1 fields on the third row, 3 fields on the fourth row, 1 fields on the fifth row.
example

header
name name
email phone
info
zip city state
info
submit

evenly spaced rows from the form body border
evenly space vertically
evenly spaced horizontally
responsive text input field
40% of the page width and responsive to the screen size.

[Paulie_D]

Can you link the Codepen here?

[artlessink]

That I can.

http://cdpn.io/admyEe

[Paulie_D]

Whoa…not the whole page…

Frankly a single list doesn’t make a lot of sense here…especially if you want rows of fields….in fact a list isn’t really the optimal structure at all.

A table would be better…or at least a table like structure using divs in rows etc.

Is the HTML changeable at all?

[artlessink]

“The form HTML is generated dynamically by the plugin, there’s no place to edit it.”

[artlessink]

I can however give the form element a custom css name and target that name for both elements.

[Paulie_D]

Then probably not without a shipload of specific widths etc. and some very specific CSS.

You’d have to float the li , set widths to get the spacing you want etc…it’ll be finicky work and probably not very responsive although you could mitigate that by using % widths & margins as much as possible.

[artlessink]

I’ve tried that and so far I can’t seem to get the the right text areas on the right row. What do you suggest?

[Paulie_D]

Remove everything from the Codepen that isn’t related to the issue and show us where you are right now.

We don’t need the menu, background etc.

Try taking a tree trimmer to all the linked stuff that isn’t related. Having to wade hip deep through extraneous code is a PITA to be honest.

[artlessink]

Consider it done
http://cdpn.io/KVgbgZ

[mhodges44]

artlessink,

Paulie_D is right. unless you can change the code structure to use some type of grid layout, you’re just going to have to go through the painful process of setting specific floats, clears, media queries, and % widths/margins/padding. What you are wanting is very doable, it will just take an hour or so of your time to sit down and set the style parameters and selectors for everything. I would suggest working within the codepen that you linked and using your browser’s developer tools to tweak the layout to figure out exactly what properties you will need.

[Author]

Posts