Please Note: We are no longer using forums to facilitate standard support. 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.

Alignment issues using studiopress "Sleek" child theme

  1. I am having CSS issues with the alignment. See at:

    Mainly, I want the radio buttons side by side and all the other fields to be ligned up correctly.

    It seems, that Studiopress did add some extra gravity forms css in the theme css. However, I cannot find the solution for this.

    Posted 4 years ago on Wednesday January 5, 2011 | Permalink
  2. When you go to the page, "step 1" alignment is fine. When you continue to "step 2" you will see what I mean.

    Posted 4 years ago on Wednesday January 5, 2011 | Permalink
  3. By default Radio Buttons are not displayed side by side. If you want to display them side by side you would have to write custom CSS to float them side by side. You would do this by inspecting the HTML and writing the appropriate CSS to float them side by side.

    If you install Gravity Forms v1.5, which is currently a development release, you can use Ready Classes which make it easier to position fields and radio button/checkboxes side by side.

    See this blog post:

    Ready Classes require Gravity Forms v1.5 which you can download from the Downloads page. Keep in mind Gravity Forms v1.5 is a development release, not a final release.

    Posted 4 years ago on Wednesday January 5, 2011 | Permalink
  4. Hi Carl,

    I am using Version 1.5.rc2.1 and I have tried the ready classes (using gf_list_2col). But it did not produce any results. Have you seen step 2 of my multi page form? Can you please help me? Also, how do I remove the previous button completely?

    Posted 4 years ago on Wednesday January 5, 2011 | Permalink
  5. This should fix the basic alignment issue. Append this to your theme stylesheet.

    body .gform_wrapper li, body .gform_wrapper form li {overflow:hidden!important}

    I don't see the ready class styles applied for the multiple choice fields. Did you remove those? If so, then try adding the following class name to the fields in the form builder "gf_list_inline". That should work better for the simple yes/no layout.

    you would add this to hide/remove the previous button

    body #gform_previous_button_1_44 {display:none}

    test screenshot:

    from there, you can tweak padding, and other things as necessary to get the look you want.

    Posted 4 years ago on Wednesday January 5, 2011 | Permalink
  6. Thanks for the help! It's all starting to come together now. The last thing (Hopefully) I need help with is the address fields on the last page. Can you please check it out for me? I made several changes to the forms.css to get the descriptions positioned to the far right. But now I cannot get this last page aligned correctly.

    Thank You!

    Posted 4 years ago on Thursday January 6, 2011 | Permalink
  7. Just a note. If you actually made changes to the form.css file in the plugin folder, you should probably move those to your theme's stylesheet. When you auto-update the plugin, the default forms.css file gets overwritten and you'll lose your changes.

    There's even a note in the header of the CSS file to let you know this. Just FYI.


    You can always copy the forms.css file in it's entirety to your theme directory, link it up then go to the form settings page and set the "Output CSS" option to no. That way you're using your copy of the forms.css file and it won't be overwritten later. The caveat is that you will have to update your version with anything new that gets added in future versions of the file.

    I'll take a look at the address fields, but so far the CSS looks pretty wacky. I'm not sure offhand what you'll need to do to fix it.

    Posted 4 years ago on Thursday January 6, 2011 | Permalink
  8. Well, here's the gist of it. You've got paddings, margins and widths that are all pushing the horizontal boundaries of your layout. That's causing elements to wrap in weird ways and jack up your layout. You need to revisit a couple of these rules to get closer to what you want.

    my test screenshot:

    I changed line 149 to this - changed width value

    .gform_wrapper .right_label div.ginput_complex,
    .gform_wrapper .left_label div.ginput_complex  {
        float: left;
        width: 36%;

    then, I changed line 222 to this - removed the 150px padding left property

    .gform_wrapper .ginput_complex .ginput_left,
    .gform_wrapper .ginput_complex .ginput_right,
    .gform_wrapper .ginput_complex .ginput_full {
        display: block;
        min-height: 43px;
        overflow: visible;

    You'll need to use inheritance to reduce the size of the individual inputs to finish cleaning everything up. As a note, the top label format usually works best when working with limited horizontal space and you have to do a lot less in the way of CSS modifications.

    Posted 4 years ago on Thursday January 6, 2011 | Permalink
  9. Excellent Support!

    Posted 4 years ago on Thursday January 6, 2011 | Permalink
  10. Okay, so I am trying to remove the previous button from the second part of my two part form entirely. Based on this post I tried adding the following code to my theme's style.css file, but it didn't remove the button. Any ideas?

    body #gform_previous_button_1_44 {display:none}

    P.S. the form is on a secure site that requires login so I can't provide a link. It would be nice if there was simply a checkbox on the two part form system that allowed a user to toggle whether or not to include the buttons at all.

    Posted 4 years ago on Monday April 11, 2011 | Permalink


Support Tickets

Open A New Support Ticket
 Open A New Priority Support Ticket *

* Developer license holders only