SaraviaEverAfter

webpage: www.SaraviaEverAfter.com/rsvp password: Jan22

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

Is the only options for the follow up field a text box? Or are we able to have a select field or checkbox field show up after making the initial conditional selection? Also, do the required fields work if they qualify to the 2nd question?