UL and LI killed my style CSS help « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

AlikA
Member
I have a site:
http://migrationlawyers.co.za/contact-form

I styled my Them's UL LI and gravity forms picks it up.
I dont know of a way i can remove the CSS styling i made site wide to allow Gravity forms to function properly.

This code should let you see what I am after... the FLOAT and WIDTH is killing me!
```
/*Gravity Forms */
#content ul li {
	background: none;
	float: ?
	margin: 0;
	padding: 0 0 22px 14px;
	text-align: left;
	width: 45%!important;
}
```
http://i.imgur.com/pM3SBA4.jpg
^^ This is what I would like to achieve
Posted 8 years ago on Friday April 26, 2013 | Permalink

Looks like you need to be a lot more specific with your style rules.. try this and see how far it gets you..

[css]
body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
	float: none !important;
}

body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields,
body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
	list-style-type: none !important;
	list-style-image: none !important;
	list-style: none !important;
	background-image: none !important;
	background: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border: none !important;
}

body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
	padding: 0 0 22px 14px !important;
	width: 45% !important;
}

body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields > li.gfield:before {
	content: "";
}

my quick test.. http://i.imgur.com/L0H3rta.jpg

Also, I see you have some left half/right half ready classes applied to some list items.. if you're not planning a 2 column layout for those then you probably want to remove them to prevent other inheritance issues.

Hope that points you in the right direction.

Posted 8 years ago on Friday April 26, 2013 | Permalink

AlikA
Member

Wow, thanks... That is Awesome way of targeting the Li fields, thanks for that.

I do plan on using 2 fields, and that is my main concern really...
I am very much lost on how to actually make those 2 fields work.

>>> Another topic - is it me? or id Gravity Forms somewhat difficult to style?

Posted 8 years ago on Friday April 26, 2013 | Permalink
David Peralty

It is difficult to style only because we have to work around the stylesheets of every single WordPress theme out there in the market today... We are always refining things though, so if you have suggestions, please let us know.

I don't know what you mean by your question about the "two fields".

Posted 8 years ago on Friday April 26, 2013 | Permalink
AlikA
Member
The FLOAT is one element that i really dont understand if you remove the following 2 floats everything works, but there is no way that you CAN remove them because any atribute given messes it up.

Any input will be greatly appriciated!
```
body #main #container #content .entry-content .gform_wrapper form .gform_body ul.gform_fields li.gfield {
    float: none;
}
```
and
```
#content ul li {
    float: left !important;
}
```
Posted 8 years ago on Friday April 26, 2013 | Permalink
AlikA
Member

@David Peralty

Sorry I meant 2 columns

in column one i have the form <<< Align Left
in column two I have an HTML box >>>> Aligned Right
As shown in the image attached in the first post. http://i.imgur.com/pM3SBA4.jpg

Posted 8 years ago on Friday April 26, 2013 | Permalink