Changing Checkbox Item Label Width

I am trying to change the width of a checkbox item label with CSS, but it is not working. I can change background color and other parameters, but width does not change.

I have been testing with some CSS code and it works, I was able to change the background color and width: 

Which specific field are you trying to handle? 

May we get the CSS code you're using? 

Looking forward to your response. 

That's not the text I was trying to change. It's the text beside the checkbox. e.g. "Includes General Reception and Silent Auction."

#label_input_12_0 {
    width : 250px;
   
}

Hello,

Are you trying to adjust that label field for it not to be overlapped by the other text box field? As I've checked your form you have nothing to adjust in that field (#label_input_12_0) if you are having trouble caused by these overlapping fields. Instead of adjusting this field, you can just adjust the other text box field position. If this was the case, can you please see the screenshot below to confirm it?

If so, in adjusting this text box field you just need to insert the code below into your form's CSS area:

#input_8, #cid_8 label.form-sub-label {

    margin-left : 84px;

}

Result:

Related guide:

How to Inject Custom CSS Codes

If it happened that this was not right the solution and outcome you are looking for, please let us know, so we can further assist you. Thank you!

Yes, that's part of the issue. but it's more than that. For the next option down (VIP Experience) I need the option text box width to be smaller and the option text to wrap.

I've added that text now in the form so you can see what I mean.

If there is nothing to edit in #label_input_12_0, what is the container for the option text (e.g. where does the text "Includes General Reception and Silent Auction" actually exist in the coding?

What you may do is to inject the following code to adjust the text according to its container: 

.form-checkbox-item label {

   white-space: normal;

}

Once you do that you may inject this code to handle the option's size: 

#id_9 .form-checkbox-item{

    width: 300px !important;

}

Replace the "id_9" with the field id you want to affect, to find it, right click on the option and copy the id of the <li> parent, example: 

You may do the same for each element you want to change the width. 

I hope this helps. 

Thanks! That seems to have done the trick.