Full width responsive form
-
Hi,
Please help to make contact form 7 to full witdh and responsive. Link to the contact form page is added.
At the moment i have this css, please help to fix and reduce this css:
.wpcf7 .wpcf7-text {
width:100%;
padding:0px 100px 0px 10px!important;
padding-bottom:0!important
}
div.wpcf7 {
border:1px solid #77a464;
padding:20px
}.wpcf7-form textarea {
outline:0;
width:100%;
height:150px
}.wpcf7 {
text-align:left;
width:100%
}div.wpcf7 .wpcf7-form-control {
max-width:100%
}input.wpcf7-form-control.wpcf7-submit:hover {
background-color:#77a464;
color:#fff
}.wpcf7 {
background-color:#fff!important;
border:2px solid #77a464!important
}.wpcf7-text {
background-color:#fff;
width:100%
}.wpcf7-textarea {
background-color:#fff
}.wpcf7-form {
margin-left:10px;
margin-right:25px;
margin-top:15px
}.wpcf7 {
width:100%;
padding:20px 25px!important;
padding-bottom:0!important
}.wpcf7-text {
height:50px;
padding-left:10px!important
}.wpcf7-response-output {
margin-bottom:30px!important
}.wpcf7-text,.wpcf7-textarea {
border-color:#77a464!important
}.wpcf7-text:focus,.wpcf7-textarea:focus {
border-color:#363636!important
}.wpcf7-text,.wpcf7-textarea {
color:#363636!important;
width:100%!important
}.wpcf7-form p {
color:#363636
}.wpcf7-submit {
width:100%;
color:#fff!important;
background-color:#363636!important;
font-size:15px!important;
padding:20px
}.wpcf7-submit:hover {
border-color:transparent!important;
background-color:#77a464!important;
color:#fff!important
}.wpcf7 textarea {
background:#77a464;
color:#fff!important
}.wpcf7-form label {
color:#363636
}.wpcf7 {
border:none!important
}.wpcf7-list-item input[type=checkbox] {
margin-right:4px
}.wpcf7-quiz {
background-color:#fff;
width:30px
}.wpcf7 form {
margin-top:-116px
}span.wpcf7-not-valid-tip {
display:none
}In some browsers and with desktop view it is even now good (opera, chrome, firefox) but not with ie11, please help to fix it.
How to make text input fields full witdh without this css code? This solution is not perfect, it adds 100px padding to the right side, that i do not want. Without it input fields are shorter than textarea form and submit button.
.wpcf7 .wpcf7-text {
width:100%;
padding:0px 100px 0px 10px!important;
padding-bottom:0!important
}First i would like it to be similar with different browsers and then comes responsive part. I hope someone can share css that works for my site.
Thank you!
With gratitude and love,
MarxVeixThe page I need help with: [log in to see the link]
The topic ‘Full width responsive form’ is closed to new replies.