Width of checkbox option is smaller compared to form builder display

Hi!

This issue was solved with some custom css but it started to bug again.

In the builder it appears like that (good display):

And in live version it displays like that:

Here is the custom css that was implemented:

label#label_input_168_0 {
    width : 500px !important;
}

label#label_input_169_0 {
    width : 500px !important;
}

Thanks for your help.

Please try adding the following CSS code to the form to display the single/multiple choice fields on the form correctly.

.form-radio-item, .form-checkbox-item {

    max-width: none !important;

}

Thanks!

I tried but it does not work.

Here the full CSS I have:

"
.form-sub-label {
    color : #9FA0A9 !important;
}

.form-required {
    color : #EBC717 !important;
}

.form-checkbox-item label {
    text-align : justify!important;
    font-size : 12px;
    color : #333333 !important;
}

.form-radio-item label {
    font-size : 12px;
    color : #333333 !important;
}

.qq-upload-button.undefined {
    margin : 12px !important;
    width : 200px !important;
}

.form-textbox {
    box-shadow : none !important;
    outline : none !important;
}

.form-submit-button {
    width : 200px !important;
}

label#label_input_168_0 {
    width : 500px !important;
}

label#label_input_169_0 {
    width : 500px !important;
}

@media screen and (max-width: 480px){
    .form-pagebreak-back-container {
        float : left !important;
    }

    .form-pagebreak-back-container, .form-pagebreak-next-container {
        width : 40% !important;
    }

    .form-checkbox-item:not(#foo), .form-radio-item:not(#foo) {
        width : 50%;
    }

}"

Hi,

I'm currently working on your form. I will get back to you shortly with the necessary codes to resolve the issue.

Thank you. 

Hi! Any news on this issue? I wonder why it appeared fine for a few days and then it messed up...

I have added the custom CSS below:

#cid_168, #cid_169,

#id_168 .form-checkbox-item,

#id_169 .form-checkbox-item { 

  max-width: none !important; 

}

and your form now looks like this:

On desktop and tablet it looks fine but not on mobile...

Could you please test it now. I have added the mobile responsive code in your Form.

Let us know if you have further questions.

Thanks.

It seems to be all good thanks! I hope it will remain the same after few days and won't mess up again.

Thank you all for your help.