How to display 4 columns in Image checkbox widget?

Hello, On my second image survey question I have 8 options, they are displaying in 3 columns. I would like them to display in 4 columns (2 rows).

I assume you meant this image checkboxes on your form https://www.jotform.com/answers/852583

I will check what CSS code is needed to have them in 4 column spread. I'll get back to this shortly.

Thanks.

Please add this CSS codes on your existing CSS codes 

.form-multiple-column {

    width : 950px !important;

}

You can check it working on my test form https://www.jotform.com/61538375481967

Let us know how it goes.

Hey Jonathan,

Thank you for the update! The columns look great, they are not centered. Can they be centered on the page. 

From the looks of it, it seems like you have already changed width to give you a 3 column display. The images are also now centered when I view it.

You might also need to check your custom CSS code for errors, I see one when I cloned your form. You're missing a closing bracket "}" in one of your code blocks.

If you are still having problems on this, please do let us know.

Thank you.

I stand corrected, it seems like you wanted the 2nd page, the 8 item check box to be in 4 columns with 2 rows. If that's the specific layout you want, you can paste this custom CSS code:

#cid_140 {

    width: 100% !important;

    max-width: 1000px !important;

}

It should automatically have it centered. Here's how it looks like:

Note that if the screen size is small, the check box display will adjust accordingly. 

Let us know if that works.

Hi Charlie,

It looks like it is now centered (question 2), however it is still displaying 3 columns, instead of 4. I added the css that Jonathan supplied and it is still not working, please let me know how to proceed.

.form-multiple-column {

    width : 950px !important;

}

There appears to be an error in the css, which is why the custom css is not being updated correctly. To resolve the issue, please visit your Form Designer and add a closing bracket ( } ) as seen below.

Once the bracket has been added, the custom css should now work correctly.

Hi Chriistian,

I closed the bracket, but I am still not getting the result I want. See images below. I would like 4 columns and two rows center.

I've cloned and tested you form. I am not able to reproduce the same issue that you’re having.

Could you try to clear your form caches? After that, we would appreciate it if you could also test it on your side and let us know the result.

Thanks Beril,

that did the trick!