Stacking check boxes in form fields in columns

Site URL: https://www.superbugs.online/feedback-pupils

Hi, is it possible to stack checkboxes in form fields so that they appear in columns rather than side by side? We have a few feedback forms on our website, and the default design looks rather messy, especially on smaller screens.

Did you figure it out? It looks fine to me

Not on my computer?

Have you tried reducing the size of your window or using a tablet? Maybe it's more obvious then. These feedback forms are actually supposed to pop up as lightboxes if you use this link here: https://www.superbugs.online/get-in-touch

You want stacked on all devices, or some smaller screen size?

Ideally stacked on all devices so that there is always only one checkbox per row, it will look much neater then, especially for checkboxes with longer answers.

On 11/8/2021 at 7:06 PM, Superbugs said:

Ideally stacked on all devices so that there is always only one checkbox per row, it will look much neater then, especially for checkboxes with longer answers.

Add to Design > Custom CSS

/* Contact us checkbox */
body#collection-609d2c80b2ca3513fc85c1fc .form-wrapper .field-list .field .option {
    float: none !important;
    width: 100% !important;
}

This works brilliantly, thanks so much for your help!