Jump to content

Custom CSS on form block no longer works

Recommended Posts

I have a form that I customized with CSS to control the width and placement of a series of repetitive fields.   It worked fine before, but apparently the new rollout broke something in my CSS and I haven't been able to figure out how to fix it.   
Url: https://sjmetroband.org/music-request

The repetitive fields "Title", "Part", and "Copies" (which still appear on one line as they should) no longer have any space between the fields so the "margin-right" parameter in my CSS is being ignored.
Here's the CSS:

/* custom code for music request form */
#collection-63aa1c14486ba538a8c8a487{
.field-list {
display: flex;
flex-wrap: wrap;
}
  
/* Item 3 special instructions */
.form-item:nth-child(3) {
width: 100% !important;

/* Name to the left */
.form-item:nth-child(1) {
width: 52%  !important;
margin-right: 4%;
}
/* email to the right */
.form-item:nth-child(2) {
width: 41% !important;

/* Title - part - copies */
.form-item:nth-child(4), .form-item:nth-child(7), .form-item:nth-child(10),  .form-item:nth-child(13), .form-item:nth-child(16)  {
width: 40%  !important;
margin-right: 2%;
}
  
  .form-item:nth-child(5), .form-item:nth-child(8), .form-item:nth-child(11),  .form-item:nth-child(14), .form-item:nth-child(17)  {
width: 25%  !important;
margin-right: 2%;
}
  
.form-item:nth-child(6), .form-item:nth-child(9), .form-item:nth-child(12),  .form-item:nth-child(15), .form-item:nth-child(18)  {
width: 8%  !important;
margin-right: 2%;
}

Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

@spotlightlover Here's the updated code:

#collection-63aa1c14486ba538a8c8a487{
	.field-list {
		display: flex;
		flex-wrap: wrap;
	}
	.form-item:nth-child(3) {
		width: 100% !important;
	} 
	.form-item:nth-child(1) {
		width: 49%  !important;
		margin-right: 2% !important;
	}
	.form-item:nth-child(2) {
		width: 49% !important;
	} 
	.form-item:nth-child(4), .form-item:nth-child(7), .form-item:nth-child(10),  .form-item:nth-child(13), .form-item:nth-child(16)  {
		width: 49%  !important;
		margin-right: 2% !important;
	}
	.form-item:nth-child(5), .form-item:nth-child(8), .form-item:nth-child(11),  .form-item:nth-child(14), .form-item:nth-child(17)  {
		width: 39% !important;
		margin-right: 2% !important;
	} 
	.form-item:nth-child(6), .form-item:nth-child(9), .form-item:nth-child(12),  .form-item:nth-child(15), .form-item:nth-child(18)  {
		width: 8% !important;
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.