CODEWITHSUNDEEP
csswordpresscontact-form-7
Carlos Vel
Carlos Vel

Reputation: 33

How to change the width of CF7?

I am having trouble changing the width of a form field to 100 %. I think it's because it is in corruption with the themes code...

so here is my code:

.wpcf7-text, .wpcf7-textarea, .wpcf7-captchar, .wpcf7-form-control-wrap {
background-color:rgba(255, 255, 255) !important;
border: none !important;
width: 100% !important;
border-radius: 0 !important;
font-size: 16px;
font-weight: 500;
color: #1c1c1c !important;
padding: 16px !important;
box-sizing: border-box;
}
.wpcf7-submit {
color: #fff;
background-color: #414141 !important;
margin: 8px auto 0;
font-family: Francois One, latin;
font-size: 30px;
font-weight: 500;
border-color: #414141 !important;
border-bottom: 3px solid rgb(163, 163, 163)!important;
border-left: #414141 !important;
border-right: #414141 !important;
border-radius: 8px;
padding: 6px 60px;
line-height: 1.7em;
box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.4);
}
.wpcf7-submit:hover { 
background-color:rgba(78, 78, 78) !important; 
border-width: 2px !important;
border-color:  #494949 !important;
border-bottom: 3px solid rgb(163, 163, 163)!important;
border-left: #4e4e4e !important;
border-right: #4e4e4e !important;
border-radius: 8px;
padding: 6px 0px !important;

}
span.wpcf7-list-item { display: block; }

And here is the link to the site:

https://ptbydimitri.de/so-geht-es-weiter/

As you can see, the form fields are not with a width of 100% like the send button.

I hope someone can help!

Upvotes: 0

Views: 180

Answers (1)

Riad Citaku
Riad Citaku

Reputation: 349

Your input tag is inside the label tag, you have to change the width of label to 100% to make it work.

.wpcf7 .wpcf7-form label {
    width: 100%;
}

Upvotes: 1

Related Questions