Docs

[[email protected]]

Hi I am working on

theartefact.com/customise-jacket

Flip through the last page and you will see the last set of radio buttons before the email form are cut off. I tried inserting some code I found on another thread, but no luck.

Here is the code from the other thread

.gform_wrapper.gf_browser_chrome ul.gform_fields li.gfield input[type=radio] {
margin-left: 5px !important;
}

[[email protected]]

In the same breath, the words are to the left of the checkbox on preview and the box is below the form on the actual page. Gravity tells me when it works in preview, but broken in x it is an x problem.

thanks,
Kathy

[Rupok]

Hi Kathy,

Thanks for writing in! Certainly the issue is not related to X rather your custom code. It seems you have added this code :

body .gform_wrapper li ul.gfield_checkbox li input {
  left: 0;
  position: absolute;
  top: 40%;
}

It’s fine for the images above but affecting the checkboxes you are referring. Let’s add the below code to fix this :

body .gform_wrapper li ul#input_3_19.gfield_checkbox li input {
  top: -5px;
}

I have tested the code and the result would be like this – http://prntscr.com/ckau8j

Hope this helps.

[[email protected]]

Thanks, I will be doing this over and over again in the same situation. What class should I use instead of calling this one out specifically?

[[email protected]]

also in a smaller screen size the words cut off under the check box.

[Christopher]

Hi there,

Please remove previous code.
And add following code :

.gform_wrapper li.gfield.gf_list_3col ul.gfield_checkbox li label {
    display: inline-block !important;
    line-height: 33px;
    float: right;
}

Hope it helps.

[[email protected]]

Thank you much better. The last bit is the check box is just lower than the words on the line, do you know how to fix that?

[Lely]

Hi There,

You’re welcome!
Please try this custom CSS:

body .gform_wrapper li ul#input_3_19 li input, body .gform_wrapper li ul#input_3_24 li input {
    top: 16% !important;
}

Hope this helps.

[[email protected]]

Hello,

Sorry to be a pain, but I am really struggling to understand. I will be doing hundreds of these, so I need a global way of naming the class. What is the class for this? The text is very far from the button. So I am looking for a check box, (not cut off), with words (not overlapping) next to the button in a line. The code supplied works, but only lists those two elements.

[Paul R]

Hi,

You can add a class to your inputs and target it in your css.

http://screencast.com/t/zgWiKjYB

Hope that helps.

[Author]

Posts