Jump to content

Make Checklist Align Vertical

Go to solution Solved by JessicaM,

Recommended Posts

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

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

If my post solved your problem, please mark it as the solution - thanks!

Link to comment

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
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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!

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

If my post solved your problem, please mark it as the solution - thanks!

Link to comment
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

image.thumb.png.bbab5766be66edddcee2cd942cc1aba3.png

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

.radio input {
    opacity: 1 !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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

 

image.png.5c2b1d8bef9ef7c1cab2817d8068855c.png

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

If my post solved your problem, please mark it as the solution - thanks!

Link to comment
15 hours ago, tuanphan said:

This code caused problem

image.thumb.png.bbab5766be66edddcee2cd942cc1aba3.png

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • Solution

@tuanphan That didn't fix it, but I did add this code and now it looks normal. Appreciate all of your help!

 

.FIHoQa7qSveb7OWZMCyF{
  display: none;
}

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

If my post solved your problem, please mark it as the solution - thanks!

Link to comment
  • 5 weeks later...

@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

Jessica Miller | Squarespace Website Designer
https://www.jessicamiller.work
jessica@jessicamiller.work

Search the blog and get Squarespace tips to your inbox
https://www.jessicamiller.work/blog

Want to pick my brain or get help? Book a free 15 minute call.

If my post solved your problem, please mark it as the solution - thanks!

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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?
image.png.e1334961375aaf8617ffc75a9b1996f5.png

Hi,

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.