CODEWITHSUNDEEP
wordpresscss
Sparkz
Sparkz

Reputation: 83

Wordpress Gravity Form CSS for checkbox

i have a Wordpress form added here : http://goo.gl/6UtIgr

on the second page of form : i have several checkbox groups with 2 items each.

iwant them to align on 3 col layout so i used Ready class gf_list_3col

.gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li 
{
  width: 33%;
  float: left;
  margin: 0 0 8px 0;
  min-height: 1.8em;
  clear: left !important;
  margin-left: 0 !important;
}

but it seems to be not working.

please give a solution.

Upvotes: 0

Views: 371

Answers (1)

rnevius
rnevius

Reputation: 27102

For the checkbox groups with three inputs, you'll need to remove the float and add in a display: inline-block;:

.gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li {
    width: 33%;
    float: none;
    margin: 0 0 8px 0;
    min-height: 1.8em;
    display: inline-block;
}

If you instead want your groups with two inputs to follow the exact same grid, you'll have to target them with .gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li:

.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li {
    width: 33%;
    float: none;
    margin: 0 0 8px 0;
    min-height: 1.8em;
    display: inline-block;
}

You can obviously combine these, if you wish to target both.

Upvotes: 1

Related Questions