Jump to content

Customizing form field layout and equal widths for desktop only

Recommended Posts

Site URL: https://theharper.squarespace.com/

Hi! 

PW: theharpernyc

 

I'm trying to using custom css to customize the form field. 

I managed to get the the form fields to be where I want it by using this code:

For email & phone number:
div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(2), .form-wrapper .field-list>div:nth-child(3) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(2) {margin-right:2%;}}

For unit & budget:
div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(3), .form-wrapper .field-list>div:nth-child(4) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(3) {margin-right:2%;}}

For broker info:
div#block-yui_3_17_2_1_1634318748669_6592{.form-wrapper .field-list>div:nth-child(5), .form-wrapper .field-list>div:nth-child(6) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(5) {margin-right:2%;}}

And this is the result:

image.thumb.png.520108beabdbdc8dcb01711e87f11eb5.png

 

However I am having a hard time trying to get each filed box to be the equal width & spacing like this:
Ideally all the field would be equal width and height.

image.thumb.png.9d1f2521a2997e9ac768e6de54a0bd02.png

 

Also, how what kind of code would I need to make this layout to be visible on on desktop?

Thanks in advance! 

Link to comment
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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.