Make Checklist Align Vertical

How can I make the checklist options on the form at the bottom of the page stack vertically instead of horizontally? The form looks terrible on mobile because it's wrapping each option. Thanks!

https://www.globalmissionsproject.com/find-a-project

Replace your code

.form-wrapper .field-list .field .option {
    width: 20%;
    float: left;
    text-align: left;
    margin-bottom: 30px
}

with this code

@media screen and (min-width:768px) {
.form-wrapper .field-list .field .option {
    width: 20%;
    float: left;
    text-align: left;
    margin-bottom: 30px
}
}

@tuanphan  Oh thank you - I had forgotten that I had that code already in there for another form. When I removed it, it caused the form I had a question about to go back to normal (vertically) so it looks fine.

I transferred my original code to the header of the page with the other survey, but the radio button is only showing on the first option (1)... do I need to add something else?  It's for this page - https://www.globalmissionsproject.com/project-feedback

Thanks!

2 minutes ago, webdesign1234 said:

@tuanphan  Oh thank you - I had forgotten that I had that code already in there for another form. When I removed it, it caused the form I had a question about to go back to normal (vertically) so it looks fine.

I transferred my original code to the header of the page with the other survey, but the radio button is only showing on the first option (1)... do I need to add something else?  It's for this page - https://www.globalmissionsproject.com/project-feedback

Thanks!

This code caused problem

You can add this to Design > Custom CSS to override it

.radio input {
    opacity: 1 !important;
}

@tuanphan The rest are showing up ok, but the "1" looks odd -

15 hours ago, tuanphan said:

This code caused problem

You can add this to Design > Custom CSS to override it

.radio input {
    opacity: 1 !important;
}

 

Change to this code

#radio-9f4ae85f-dca3-4c51-8499-34dcf51c00bd input {
    opacity: 1 !important;
}

@tuanphan Having a small issue with this form again.... the radio buttons don't allow you to select the first option (the 'yes' and the '1') - https://www.globalmissionsproject.com/project-feedback

On 7/26/2023 at 11:16 PM, webdesign1234 said:

@tuanphan Having a small issue with this form again.... the radio buttons don't allow you to select the first option (the 'yes' and the '1') - https://www.globalmissionsproject.com/project-feedback

Add to Design > Custom CSS

div#page-section-62aca432a209665eb9bad33e .form-field-shape-square .form-item input {
    z-index: 9999
}

div#page-section-62aca432a209665eb9bad33e .form-wrapper .field-list .field .option {
    width: 20%;
    float: unset;
    display: inline-block;
}

I have also problems with the form. I would like to get selected item circled like this. Even I have selected option 3, it shows no 1 to be selected. It works if the display is vertically, but when display is horizontally, the selection won't work anymore. My site: Minun sivu (squarespace.com). Any ideas how to implement this?

On 8/5/2023 at 12:39 AM, hahven said:

I have also problems with the form. I would like to get selected item circled like this. Even I have selected option 3, it shows no 1 to be selected. It works if the display is vertically, but when display is horizontally, the selection won't work anymore. My site: Minun sivu (squarespace.com). Any ideas how to implement this?

Hi,

It already fine to me. Can you check it again?