Change number of columns of Checkboxes for each device?

Hello. I have forms that I have created that have 2 columns. They work fine for desktop, tablet and landscape. But when in portrait the 2 columns get overlapped. So what I would like to do is that when the form is seen on portrait the form would change from 2 columns to 1 column. Is this possible and how??

Thanks!!

I suggest you try first setting the column number to the appropriate maximum needed.

Example, set it at least to 3 column this way it can expand if needed(respond) up to 3 column.

Then, make sure you setup the form to be mobile responsive as described on the user guide

user guide: -How-to-make-forms-Mobile-Responsive

Hope this help. Let us know how if you need further assistance.

Thanks.

I see that you were only referring to the Checkboxes option and not the overall responsiveness of the form.

So what I would like to do is that when the form is seen on portrait the form would change from 2 columns to 1 column. Is this possible and how??

There is no means to dynamically make the number of column set to interchange using the Form Designer only. The reason I suggested to set the max number of column needed is for the overall responsiveness of the form.

Example, if you change the orientation of the form (landscape to portrait) on mobile device, it should be able to respond appropriately and will fit the necessary fields in column allowed formation.

BUT this option will only work on the Checkboxes columns that you have on the form http://www.jotform.co/form/50417769070861 by adjusting manually the width of the Checkboxes options label names.

The way I see, some of the Checkbox items lables were just too long the reason the overlap each other when in responsive mode.

Hope this help. Let us know if there is more we can assist you with.

Thanks.

I tried changing the width the columns width in the css editor but I haven't been able to make them to not overlap. I don't know what I'm doing wrong or what I have to edit. could you help me? I don't understand how to make it work.

Thanks

Instead of changing the width manually I would actually suggest making the browser do the job for you.

When doing this, it will show each entry properly on different mobile sizes, unlike manually setting the width and will show the options in the nice manner.

To do this, please add this CSS code:

#cid_17 span.form-checkbox-item > label {
    white-space: pre-line;
}

Once you do you will see the options looking like this:

Do let us know if that would work for you.

This is exactly what I needed!!! It worked perfect!! Thank you so much!