Jump to content

Two column for drop down menu on form

Recommended Posts

Site URL: http://www.spotlightperformingarts.co.nz/timefeesanduniform

I'm hoping someone can help me with this order form. I want to have some tick boxes and drop down menus run horizontally on two columns so that the form is not an an endless vertical scroll. The URL for the site is the following:

http://www.spotlightperformingarts.co.nz/timefeesanduniform

I’m wanting the ‘What school?’ grouping to run two columns as in the attached image and the ‘T-shirt’ and ‘Hoodie’ drop down menus to run along two columns separated by the children’s and adult sizes. 

I know this is a matter of a little custom CSS but I've tried and am not code savvy enough to figure out what CSS is needed!

Any help would be great as I think this is a simple and probably common problem.

Thanks!

A3207417-D8CD-4A42-A8D3-5967ECD2F4F3.jpeg

778FBBB1-5BBA-4C67-B48A-1124DF864782.jpeg

Link to comment

Hi. Add to Design > Custom CSS

/* form side by side */
@media screen and (min-width:768px) {
div#block-905d86f5ead14722e681 div:nth-child(n+4) {
    width: 50% !important;
    float: left !important;
}
div#block-905d86f5ead14722e681 div:nth-child(2n) {
    clear: left !important;
}
div#block-905d86f5ead14722e681 .select:nth-child(n+14) {
    clear: left !important;
    width: 100% !important;
}
div#block-905d86f5ead14722e681 div:nth-child(14) {
    width: 100% !important;
}
div#block-905d86f5ead14722e681 .select:nth-child(n+15) {
    float: left !important;
    width: 50% !important;
}
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

Thanks @tuanphan this worked to some extent - but still not quite what I had in the screenshots above. Instead of altering the entire block, is there a code where I can individually control the fieldsets? Or just hone in on the  blocks I want (see attached). Additionally, I need two columns for the hoodies as well.

thanks for all your hard work!! 🙂

27407544-F564-4164-B609-9CF8D7D17F45.jpeg

Edited by leuch017
Grammar
Link to comment

Hi @tuanphan,

I found a css code that worked:

Quote

 

#collection-6062c15403adf749f5c5fb83{
.field-list {
display: flex;
flex-wrap: wrap;
}

/* These will be Full Width*/
.form-item:nth-child(2), .form-item:nth-child(3), .form-item:nth-child(14), .form-item:nth-child(25), .form-item:nth-child(24), .form-item:nth-child(25), .form-item:nth-child(26), .form-item:nth-child(27), .form-item:nth-child(28), .form-item:nth-child(29), .form-item:nth-child(30){
width: 100% !important;
}

/* These Will Be Beside Each Other */
/* LEFT */
.form-item:nth-child(1), .form-item:nth-child(4), .form-item:nth-child(5), .form-item:nth-child(6),.form-item:nth-child(7), .form-item:nth-child(8),.form-item:nth-child(9),.form-item:nth-child(10),.form-item:nth-child(11), .form-item:nth-child(12),.form-item:nth-child(13), .form-item:nth-child(15), .form-item:nth-child(16), .form-item:nth-child(17), .form-item:nth-child(18), .form-item:nth-child(19), .form-item:nth-child(20), .form-item:nth-child(21), .form-item:nth-child(22), .form-item:nth-child(23), .form-item:nth-child(24){
width: 40%  !important;
margin-right: 3%;
}
/* RIGHT */
.form-item:nth-child(31){
width: 67%  !important;
}
}

 

Thanks for your help with this one,

Leslie

Edited by leuch017
Link to comment
11 hours ago, leuch017 said:

but now another problem has risen. The code shows up in mobile view. 

Any code solution to this? Otherwise I will disable mobile view.

Thanks!!

Screen Shot 2021-04-29 at 3.26.24 PM.png

Access Page Header or Code Injection Header, remove text in screenshot

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.