Need to fix the responsiveness of the Button Checkboxes widget.

The “emergency contact phone number” is messed up. And the “how often do you receive facial/skincare services” answer boxes are not in view properly

please help

Hi Alexandra, 

Thanks for reaching out to Jotform Support. You can add this CSS code to your form to fix the responsiveness of your Button Checkboxes widget. Let me walk you through it:

1. Copy the code below:

.form-label.form-label-auto {

      display: block;

      float: none;

      text-align: left;

      width: 100%;

    }

@media screen and (max-width: 770px) {

    #cid_9 div {

        display: block !important;

    }

}

@media screen and (max-width: 480px) {

   #cid_68{

    height: 290px!important;

    }

   

   #cid_68 div[data-widget-name="Button Checkboxes"] {

     height: 290pxpx!important;

    }





    #cid_68 div[data-widget-name="Button Checkboxes"] iframe {

         height: 290px!important;

        }

}

 2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. In the Form Designer menu, click on the Styles tab, scroll down and paste the code into the Inject CSS Code box.

Now, you also need to add this chunk of code to Button Checkboxes widget's CSS section:

@media screen and (max-width: 480px) {

#checkboxes{

width: 400px!important;

}

}

#checkboxes{

width: 404px !important;

}

• In Form Builder, click on the Button Checkboxes widget and click on the wand icon.
• Under the Custom CSS tab, paste the code.
• Finally, update the widget.

Give it a try and let us know how it goes.