Need help with CSS form customization

Site URL: https://www.saraviaeverafter.com/rsvp

Hello!

I had asked recently about creating a custom code to set 2 form fields side by side...I figured out how to code those fields that I needed, and even added an extra line of code to ensure the select fields worked.

Now I am running into 2 other issues that I was semi able to fix, but are just not right when opened in different browsers:

- the first is on the first 2 fields (names), which I want side-by-side...when I first got the css code to work, they were technically "side-by-side", but not inline with each other. I semi-fixed this by adding a blank line element above those first two elements got pushed to 2nd & 3rd, and do show up in line with one another...except for on an actual phone. The preview on the site shows it just fine, but when I open it on my phone (which I'm sure most people will do), they are off.

- then with the form elements below the 2nd set of side-by-side select elements, the line and following elements (travel & accommodations) get overlapped by the elements "above" it. I semi-fixed this by adding additional blank line elements above that line that separates the last section of the form, but I had to add 5 blank lines to make it appear correct in the website...but yet again, it does not look that way on the actual phone. I don't want to add additional blank lines that would make the form appear different on the website as well, but it doesn't look good on the phone (which again, I am sure most people will use).

I'm sure there is a better way to code all of this and remove the fillers than I added for padding/formatting. Can anyone help?

Here is the coding I have in place for this page:

.form-wrapper .field-list .title {
color: #340972; 
font-family: lovelo !important; 
text-align: center;
font-weight: 200; 
font-size: 10pt; 
letter-spacing: .15em !important; 
} 

.form-wrapper .field-list .field .field-element { 
border-style:solid;  
border-width:1px;  
border-color:#7B666A; 
border-radius: 20px; 
background: #ffffff; 
}

.form-wrapper .field-list .field {
color: #340972; 
font-family: lovelo !important; 
text-align: center;
font-weight: 200; 
font-size: 10pt; 
letter-spacing: .15em !important; 
}

/* select */
.form-wrapper .field-list .field select {
    padding-left: 10px;
    padding-right: 10px;
      text-align: center;
      border-radius: 20px;}

.required span {
    display: none;
}

div#block-ebd5a18988145382b857 {.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%;}}
div#block-ebd5a18988145382b857 {.form-wrapper .field-list>div:nth-child(4), .form-wrapper .field-list>div:nth-child(5) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(4) {margin-right:2%;}}
div#block-ebd5a18988145382b857 {.form-wrapper .field-list>div:nth-child(6), .form-wrapper .field-list>div:nth-child(7) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(6) {margin-right:2%;}}
.form-wrapper .field-list .field:nth-child(8) {
    clear: left;
}
div#block-ebd5a18988145382b857 {.form-wrapper .field-list>div:nth-child(11), .form-wrapper .field-list>div:nth-child(12) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(11) {margin-right:2%;}}
div#block-ebd5a18988145382b857 {.form-wrapper .field-list>div:nth-child(13), .form-wrapper .field-list>div:nth-child(14) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(13) {margin-right:2%;}}
.form-wrapper .field-list .field:nth-child(15) {
    clear: left;
}
div#block-ebd5a18988145382b857 {.form-wrapper .field-list>div:nth-child(23), .form-wrapper .field-list>div:nth-child(24) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(23) {margin-right:2%;}}
div#block-ebd5a18988145382b857 {.form-wrapper .field-list>div:nth-child(25), .form-wrapper .field-list>div:nth-child(26) {width: 48.8%; float: left;} .form-wrapper .field-list>div:nth-child(25) {margin-right:2%;}}
.form-wrapper .field-list .field:nth-child(27) {
    clear: left;
}

webpage: www.SaraviaEverAfter.com/rsvp

password: Jan22

Hi. What is password?

On 2/20/2022 at 11:32 PM, tuanphan said:

Hi. What is password?

webpage: www.SaraviaEverAfter.com/rsvp

password: Jan22