PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Thirds (3 Columns) CSS not Aligning

  1. 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 5 years ago on Friday May 17, 2013 | Permalink
  2. 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 5 years ago on Friday May 17, 2013 | Permalink
  3. 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 5 years ago on Friday May 17, 2013 | Permalink
  4. 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 5 years ago on Friday May 17, 2013 | Permalink
  5. 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 5 years ago on Friday May 17, 2013 | Permalink
  6. Richard Vav
    Administrator

    You're welcome

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

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