Title: Full width responsive form
Last modified: September 19, 2019

---

# Full width responsive form

 *  [marxveix](https://wordpress.org/support/users/marxveix/)
 * (@marxveix)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/full-witdh-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,
    MarxVeix
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffull-witdh-responsive-form%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Thread Starter [marxveix](https://wordpress.org/support/users/marxveix/)
 * (@marxveix)
 * [6 years, 8 months ago](https://wordpress.org/support/topic/full-witdh-responsive-form/#post-11965583)
 * Hi,
 * Please help to fix my cf7 to the same lenght with submit button, look at the 
   picture.
    [https://www.upload.ee/image/10518961/cf7-to-the-same-lenght-with-submit-button.jpg](https://www.upload.ee/image/10518961/cf7-to-the-same-lenght-with-submit-button.jpg)
 * page: [https://hingetee.ee/kontakt/](https://hingetee.ee/kontakt/)
 * Thank you
    MarxVeix

Viewing 1 replies (of 1 total)

The topic ‘Full width responsive form’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

 * 1 reply
 * 1 participant
 * Last reply from: [marxveix](https://wordpress.org/support/users/marxveix/)
 * Last activity: [6 years, 8 months ago](https://wordpress.org/support/topic/full-witdh-responsive-form/#post-11965583)
 * Status: not resolved