Forms (CF7) not rendering correctly on mobile devices

Hello,

I have a little trouble with Contact Forms 7 CSS styling, so I thought maybe someone could help me here. Here is the deal:

1) Forms are not aligned to the center on the smartphones (iOS, Android) (Screenshots 01-03)

2) On this page I want the form to be wider on the mobile version only. Now it is too thin (Screenshot 04)

Here are the screenshots for both cases.

Here is the styling code I have within the Customize CSS module regarding CF7:

	/* Contact Form 7 Styles */

	.wpcf7 { 
		background-color: transparent; color: #fff; 
}
		.wpcf7-form {
			width: auto;
			margin-left: 75px;
margin-right: 75px; 
margin-top: 55px;
	
}

.wpcf7-textarea {
width: 100%;
}

.wpcf7 input,
.wpcf7 textarea {
	width: 100%;
}

.wpcf7 label {
	display: block;
}

div.wpcf7 {
	max-width: 60em;
	margin-left: auto;
	margin-right: auto;
}

.wpcf7-submit {
 
color: #442C2E; 
 
}

.wpcf7-form .wpcf7-response-output.wpcf7-validation-errors {
    color: #D8000C;
    background-color: #FFBABA;
    border: 0;
    padding: 10px;
}
.wpcf7-form .wpcf7-response-output.wpcf7-mail-sent-ok {
    color: #4F8A10;
    background-color: #DFF2BF;
    border: 0;
    padding: 10px;
}
div.wpcf7-mail-sent-ok:before,div.wpcf7-validation-errors:before {
    font: 26px/30px dashicons;
    margin-right: 16px;
    vertical-align: middle;
}
div.wpcf7-mail-sent-ok:before {
    content: "\f147";
}
div.wpcf7-validation-errors:before {
    content: "\f158";
}

• This topic was modified 6 years, 2 months ago by micwie.

The page I need help with: [log in to see the link]