ishfeesh

That works! Thank you @Lesum for the finishing touches. What a trip this has been, appreciate the help from everyone. I have to say extremely surprised by the interaction with chatgpt spitting out code that nearly got me there.

We are getting closer and closer. This is the updated CSS and a screenshot. The issue now is getting the form fields to span evenly throughout their container. /* Apply grid layout to the field list with equal columns */ .field-list { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 equal-width columns */ grid-gap: 20px; /* Adjust space between columns and rows */ width: 100%; /* Make sure the form spans full width */ max-width: 100%; /* Prevent extra spacing issues */ } /* Ensure form items fill their grid column */ .field-list .form-item { width: 100%; /* Ensure form items take up full grid column width */ box-sizing: border-box; /* Include padding in the width */ display: flex; flex-direction: column; } /* Ensure input and select fields fill the width of their containers */ .field-list .form-item input, .field-list .form-item select, .field-list .form-item textarea { width: 100% !important; /* Force form fields to take up the full width */ max-width: 100% !important; /* Prevent width restriction */ box-sizing: border-box; /* Include padding and borders in the width */ } /* Add padding-right to form fields to prevent icons from overlapping */ .field-list .form-item input[type="date"], .field-list .form-item input[type="time"] { padding-right: 35px; /* Space for icons */ } /* Fix icon alignment for date and time fields */ .field-list .form-item input[type="date"]::after, .field-list .form-item input[type="time"]::after { content: ''; /* Clear content */ position: absolute; right: 10px; /* Place icon at the right edge */ top: 50%; transform: translateY(-50%); pointer-events: none; /* Prevent icon from blocking clicks */ } /* Ensure the icon containers are properly positioned */ .field-list .form-item .V_Vn949803b27Isii7L5, .field-list .form-item ._BwTzEKXntIXK8NbW0zx { position: absolute; right: 10px; /* Place icon on the right inside input */ top: 50%; transform: translateY(-50%); pointer-events: none; } /* Mobile responsiveness: Stack fields vertically on small screens */ @media (max-width: 768px) { .field-list { grid-template-columns: 1fr; /* Stack form fields on small screens */ } }

So after 3 days of trying to figure this out I've resorted to chatgpt which has given me the following: Example Layout: First Row: Pickup Option | Pickup Date | Pickup Time Second Row: Dropoff Option | Dropoff Date | Dropoff Time /* Container for the form */ .sqs-block-form { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns layout */ grid-template-rows: auto auto; /* 2 rows */ gap: 15px; /* Space between form fields */ } /* Style for each form field */ .sqs-block-form .form-field { display: flex; flex-direction: column; } /* Make sure all form elements fit nicely in their containers */ .sqs-block-form .form-field input, .sqs-block-form .form-field select, .sqs-block-form .form-field textarea { width: 100%; box-sizing: border-box; } /* Label styling if needed */ .sqs-block-form .form-field label { margin-bottom: 5px; } /* Specific row styling */ .sqs-block-form .form-field:nth-child(-n+3) { /* First row */ grid-column: span 1; } .sqs-block-form .form-field:nth-child(n+4) { /* Second row */ grid-column: span 1; } and when that didnt work, /* General container styling for the form */ .sqs-block-form .form-wrapper { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 columns layout */ grid-template-rows: auto auto; /* 2 rows */ gap: 15px; /* Space between fields */ } /* Ensure all form fields are styled properly */ .sqs-block-form .form-field { display: flex; flex-direction: column; width: 100%; } /* Adjust the width and box-sizing of input elements */ .sqs-block-form .form-field input, .sqs-block-form .form-field select, .sqs-block-form .form-field textarea { width: 100%; box-sizing: border-box; } /* Additional styling for labels if needed */ .sqs-block-form .form-field label { margin-bottom: 5px; } /* Target specific form fields to adjust placement */ .sqs-block-form .form-field:nth-of-type(1) { grid-column: 1 / 2; /* First column, first row */ } .sqs-block-form .form-field:nth-of-type(2) { grid-column: 2 / 3; /* Second column, first row */ } .sqs-block-form .form-field:nth-of-type(3) { grid-column: 3 / 4; /* Third column, first row */ } .sqs-block-form .form-field:nth-of-type(4) { grid-column: 1 / 2; /* First column, second row */ } .sqs-block-form .form-field:nth-of-type(5) { grid-column: 2 / 3; /* Second column, second row */ } .sqs-block-form .form-field:nth-of-type(6) { grid-column: 3 / 4; /* Third column, second row */ } For some reason these are not having any effect on the form. What am I doing wrong here?

Tried a few different suggestions still cant seem to get this to work. Would a code block with a html form and css be a better option?

@Ziggy thanks, been tinkering with it for the last 20 minutes but cant seem to get it to work. Changed 4 to 3 but not sure how to adapt the rest of it.

Password: Test098 Hey, I've been up for hours trying to make this work to no avail. I've looked at several different threads on this forum and videos explaining how to move form fields side by side or make 2 columns in a form block, but cant find anything on creating 3 columns with 2 rows. I want 3 form fields side by side with even spacing spanning the entire container. I'm banging my head on the wall at this point.

Hey guys, been battling with this for hours. Hack and slashed it together from this thread but its definitely wrong. I'm trying to have 3 columns and 2 rows i.e: [Pickup][Date][Time] [Dropoff][Date][Time] I managed somehow to get each of the 3 form fields to appear next to each other, but it doesn't span the entire width, I want to essentially justify it so its centered on the page. Site: https://chameleon-koala-6et9.squarespace.com/ Pass: Test098

Hello, can't seem to get this to work. Been looking around and i see a few tutorials on how to put 2 fields side by side but not 3, i.e. [Pickup][Date][Time] [Dropoff][Date][Time] Site: https://chameleon-koala-6et9.squarespace.com/ Pass: Test098

Thank you, that was awesome. Worked perfectly.

I'm testing this out now and will post back with results. Appreciate the help

@Power_tech thanks for the reply. I initially went with a Column Section (i believe that's the same as a "list" section) and the spacing was perfect, with 5 columns and 2 rows and a 20x20 grid gap. That's actually what I'm trying to replicate now. I then ditched the column section and went with markdown blocks since getting the font styles to format properly and adding the icons worked out much better with a markdown block following @tuanphan https://forum.squarespace.com/topic/162767-free-template-pricing-table/ instructions with some minor edits. Is there any way to achieve the same size/spacing of a column section with the markdown blocks?

Password: Test098 Hello, haven't been able to figure this out. When I add padding to a markdown block it moves the last block off grid to the right. When I take the padding off its aligned with the grid. The size and spacing of each "card" when utilizing a list section looks perfect, but I'm using markdown blocks instead now and the grid causes an issue with the size and spacing of the cards. I'm trying to figure out how to adjust the width of each block hence adding the padding but I think I'm approaching it the wrong way.

This is what I've been able to do so far since the last version yesterday. Have it pretty close but still some issues. Line height is off and still need to adjust the fonts. Trying to add padding to the image as well. Have spent quite some time trying to figure out how to adjust the width of each card. The size and spacing utilizing the list section grid which is at 20x20 2 rows and 5 columns was perfect. Now utilizing markdown blocks instead the grid and size is different.

For anyone wondering, I'm slowly but surely getting to the end result. Still a work in progress. I initially started with markdown blocks and then switched instead to a list section. After taking a look at https://forum.squarespace.com/topic/162767-free-template-pricing-table/ and https://www.sparkplugin.com/blog/squarespace-pricing-table, I decided to reapproach it from scratch using markdown blocks following the instructions. Still have some changes that need to be made that I'm working through, I'll make sure to post whatever solution worked for me at the end. I'm not sure if the same could be achieved with a list section instead. Guess there's several different paths to get to the end result.

Hey all, First off thanks for all the amazing resources and contributions here. I haven't designed a site in over 10 years and I'm extremely rusty. I've been able to get this far with a bunch of searches on this forum, but I'm stuck at a few obstacles. I'm creating "Price Cards" using a list section. I'm trying to customize the items (cards) in the following ways: Add a horizontal line Change different font styles Add Icons in the description I attached the current live card and an example card of what I'm trying to achieve. The website is chameleon-koala-6et9.squarespace.com Password: Test098