Splitting form into 2 columns

Hello. I am attempting to split the form into half with 4 questions on the left and 3 on the right.

This is the code that I have been using but it keeps on messing up the input field text boxes... Anybody knows how to solve this issue?

 

/* form 2 columns */
@media screen and (min-width:768px) {
div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: 2; column-gap:5%;
}
}

7 hours ago, designbycarolyn said:

Hello. I am attempting to split the form into half with 4 questions on the left and 3 on the right.

This is the code that I have been using but it keeps on messing up the input field text boxes... Anybody knows how to solve this issue?

 

/* form 2 columns */
@media screen and (min-width:768px) {
div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: 2; column-gap:5%;
}
}

 

Can you share your URL so I can check it?

10 hours ago, Beyondspace said:

Can you share your URL so I can check it?

Yes! Thank you so much! 🙂

https://ferret-banjo-8wlm.squarespace.com/enquiry
PW: 123456

14 hours ago, designbycarolyn said:

Yes! Thank you so much! 🙂

https://ferret-banjo-8wlm.squarespace.com/enquiry
PW: 123456

I have the following custom css to approach with display: flex way

@media screen and (min-width: 768px) {
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item {
    width: 45%;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(2) {
    order:3;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(3) {
    order:5;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(4) {
    order:7;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(5) {
    order:2;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(6) {
    order:4;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(7) {
    order:6;
  }
}

Hope it can help

21 hours ago, Beyondspace said:

I have the following custom css to approach with display: flex way

@media screen and (min-width: 768px) {
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item {
    width: 45%;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(2) {
    order:3;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(3) {
    order:5;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(4) {
    order:7;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(5) {
    order:2;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(6) {
    order:4;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(7) {
    order:6;
  }
}

Hope it can help

Oh wow!! Thank you so much! That's such a smart way to rearrange the form items in the list! 
I've pasted the code and it looks great!

I was wondering if you'd know how to move the "email" and "about your biz" question up so that there wouldn't be an empty space between the 1st and 2nd questions, and space between the 3rd and 4th question. The questions do not have to align with the right column.

Thank you so much again! 🙂

On 5/15/2024 at 12:12 AM, Beyondspace said:

I have the following custom css to approach with display: flex way

@media screen and (min-width: 768px) {
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list {
    column-count: unset;
    column-gap: unset;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-between;
  }

  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item {
    width: 45%;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(2) {
    order:3;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(3) {
    order:5;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(4) {
    order:7;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(5) {
    order:2;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(6) {
    order:4;
  }
  div#block-a22164fc4ac34e033622 .form-wrapper .field-list .form-item:nth-child(7) {
    order:6;
  }
}

Hope it can help

Hello! Just wondering if you would be able to help with adjusting the empty space between the 1st and 2nd questions, and space between the 3rd and 4th question! 🙂