Thirds (3 Columns) CSS not Aligning « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

RobOrillia
Member

Hi there: I was hoping I could get a bit of help with an alignment issue I continue to experience. On the third on (gf_right_third) it jumps down thus breaking the beautiful horizontal alignment. The page is here (scroll down) but I cannot leave it up long http://stonegateinn.com/hotel-packages/opera-house-theater-getaway-package/

Actually what I am really looking for is seen at the top of the same page " Nights-Adults-Children" tightly nested together.

Whatever is doable, I want it to look nice and the alignment problem I am experiencing does not.

Any words of wisdom are much appreciated.

Thanks,

Rob

Posted 10 years ago on Friday May 17, 2013 | Permalink
Richard Vav
Administrator
Hi Rob,

Your theme's stylesheet is adding 10 pixel padding to the left side of the list element that contains the form fields which means they are wider than they should be resulting in not enough room for your third field forcing it to drop down.

You can counteract it by adding the following towards the bottom of your theme's style.css file or wherever you are instructed to place custom css.
```
.gform_wrapper ul li {
padding-left: 0;
}
```
Regards,
Richard
Posted 10 years ago on Friday May 17, 2013 | Permalink

Thanks a lot Richard! For some reason this has no effect on the form.
Here is all the GF css I am using now in the base.css stylesheet.

body .gform_wrapper input[type=text], body .gform_wrapper input[type=url], body .gform_wrapper input[type=email], body .gform_wrapper input[type=tel], body .gform_wrapper input[type=number], body .gform_wrapper input[type=password], body .gform_wrapper textarea {
	border: 1px solid #4A6768!important;
	height: 20px;
	max-width: 299px;
	border-radius: 5px;
}
body .gform_wrapper select {
	max-width: 299px;
	border: 1px solid #4A6768!important;
	height: 30px;
	border-radius: 5px;
}
.gform_wrapper .top_label li.gfield.gf_right_half {
	width: 48% !important;
}
.gform_wrapper {
	display:auto !important;
}
.gform_wrapper ul li {
padding-left: 0;
}

Let me know if there is anything else we can do.

Thank you,

Rob

Posted 10 years ago on Friday May 17, 2013 | Permalink

Richard Vav
Administrator
Sorry about that, try adding the !important flag like so
```
.gform_wrapper ul li {
padding-left: 0 !important;
}
```
One other thing I should point out, if you view the source of your page you will find the following near the top, I assume it is hard coded into your header.php file
```
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
```
A little further down just after the stylesheets are included you have a second copy of jQuery being included, I presume by the wp_head function.
```
<script type='text/javascript' src='http://stonegateinn.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>
```
It is a bad idea to include jQuery multiple times, it can and is causing issues such as the JavaScript errors being reported by Chrome's developer console, I would recommend removing the first copy and leaving the wp_head function to include it.

Regards,
Richard
Posted 10 years ago on Friday May 17, 2013 | Permalink
RobOrillia
Member

Hey Richard, I am not a developer but will pass your valuable comments about JQuery along to him.

You Rock!

Thanks for being so thorough with your responses.

R

Posted 10 years ago on Friday May 17, 2013 | Permalink
Richard Vav
Administrator

You're welcome

Posted 10 years ago on Friday May 17, 2013 | Permalink

This topic has been resolved and has been closed to new replies.