2 Columns Contact Form – Field Width

Hello,

I tried to create a 2 columns form but somehow the field width is small and I want to enlarge it. Whenever I do that, it became a single column. Can you please help me? Here is the link to my website http://asamproperties.com/contact-us/

here is the code I use div.wpcf7 {
background-color: #ffffff;
border: 1px solid #dd3333;
color:#000;
font-family:lora, sans-serif;
padding:20px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
background-color: #ffffff;
border: 1px solid #dd3333;
color:#000;
font-family:lora, sans-serif;
width: 100%
}
.wpcf7 input[type="submit"],
.wpcf7 input[type="button"] {
background-color:#dd3333;
width:100%;
text-align:center;
text-transform:uppercase;
}
.wpcf7-submit:hover{
background: #ff0000;
}
span.wpcf7-not-valid-tip{
text-shadow: none;
font-size: 12px;
color: #fff;
background: #ff0000;
padding: 5px;
}
div.wpcf7-validation-errors {
text-shadow: none;
border: transparent;
background: #f9cd00;
padding: 5px;
color: #9C6533;
text-align: center;
margin: 0;
font-size: 12px;
}
div.wpcf7-mail-sent-ok{
text-align: center;
text-shadow: none;
padding: 5px;
font-size: 12px;
background: #59a80f;
border-color: #59a80f;
color: #fff;
margin: 0;
}
#responsive-form{
max-width:600px /*-- change this to get your desired form width --*/;
margin:0 auto;
width:100%;
}
.form-row{
width: 100%;
}
.column-half, .column-full{
float: left;
position: relative;
padding: 0.65rem;
width:100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box
}
.clearfix:after {
content: "";
display: table;
clear: both;
}

/**---------------- Media query ----------------**/
@media only screen and (min-width: 48em) {
.column-half{
width: 50%;
}
}

• This topic was modified 9 years, 1 month ago by asam2030.