Contact form alignment

Backlight Customization
#1

Having a hard time aligning the elements on this page: https://pideja.ca/lucnadeau/client-response/
This is the CSS, lifted and adapted from some previous Contact form I designed:

 /* Contact Form */
.contact-form p {
text-align : center;
margin-left: 120px;
}
.contact-form input {
max-width : 50%;
margin : 0 auto;
}
.contact-form input {
/*max-width:150%;*/
background-color: #d1c7b3;
color: black;
font-weight: 600;
}

/*.slug-contact input#name,
.slug-contact input#email,
.slug-contact input#field_1,
.slug-contact textarea#field_3 {
    background: transparent;
}*/

#message {
    margin: 1.5rem auto;
    border: 0;
}

#message.success {
    background-color: rgb(213, 202, 184);
    color: #000000;
}

#message.error {
    background-color: rgb(213, 202, 184;
            color : #000000;
    }

As you can see I’m kinda fumbling around, although I’m almost there. Looking to get to something like:

contact form
contact form1674×911 175 KB

But it still needs some adjusting. Any hints?

#2

the page looks just like what you posted. What do you want to change?

that margin-left:120px; is likely to mess things up on mobile.

#3

I know but it’s the only I found to align the SEND button and the MASSAGE box. I don’t lke it but until I find a way…
Also, the reply boxes should be much more transparent.

#4

use rgba color code in custom css for background-color

#5

I have difficulties to read the text with your transparency settings:

image
image1656×264 52.6 KB

As Rod mentioned, the alignment doesn’t work well on a small screen.

#6

Instead of .contact-form p { margin-left: 120px; }, you might want to use

.contact-form input, .contact-form textarea {
    margin-left: auto;
    margin-right: auto;
}
#7

I agree Daniel,
Very difficult to read the text whether it be the bold or the stuff in the trees.
TomO