paragraph width / Phlox

Resolved mathildewpforms
(@mathildewpforms)

5 years, 1 month ago

Hi,
I’m using the Phlox template with Elementor
I’m using additional CSS to design my form.
I don’t understand why the “paragraph text field” doesn’t (“Commentaire ou message *”) fill 100% the area like the text fields do.
(I tried “outside Elementor” and the result is the same)

In advance, thank’s a lot you for help.

My additional CSS :

/******* WPform custom ******/

/** size for the paragraph field **/
div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
width: 100% !important;
}

/** label **/
.wpforms-form label{
color:rgb(87, 87, 87)!important;
font-size: 16px !important;
font-family: ‘jost’ !important;
}

/** Input Textarea **/
.wpforms-form input, .wpforms-form textarea{
background-color:rgba(245, 245, 245)!important;
color:rgb(87, 87, 87)!important;
font-size: 16px !important;
font-family: ‘jost’ !important;
}

/** asterix **/
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color:rgb(219, 92, 0);
font-weight: 400;
}

/** button color **/
.wpforms-form button{
background-color:rgb(87, 87, 87)!important;
}

/** button submit **/
button.wpforms-submit{
color:#FFFFFF !important;
background-color:rgb(87, 87, 87)!important;
}

/** button Hover **/
button.wpforms-submit:hover{
color:rgb(255, 255, 255)!important;
background-color:rgb(185, 185, 185)!important;
}

/** button centrer **/
.wpforms-submit-container {
text-align: center;
}

/** center form **/
.wpforms-container.wpf-center {
margin: 0 auto !important;
max-width: 600px;
}

/** missing field **/
div.wpforms-container-full .wpforms-form .wpforms-field input.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field textarea.wpforms-error, div.wpforms-container-full .wpforms-form .wpforms-field select.wpforms-error {
border: 2px solid rgb(219, 92, 0);
}

/** validation **/
div.wpforms-confirmation-container-full {
color:rgb(87, 87, 87);
font-family: ‘jost’;
font-size: 16px;
font-weight: 800;
margin: 0;
background-color:#FAFAFA;
border: none;
padding: 10;
}

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

Viewing 3 replies - 1 through 3 (of 3 total)

Jade
(@jadeam)

5 years, 1 month ago
Hi @mathildewpforms,

It looks like there could be a styling conflict between the site theme and the forms. To fix this, please try the following custom CSS snippet:
```
div.wpforms-container .wpforms-form textarea {
    max-width: 100%;
}
```
And in case it helps, here’s a tutorial from WPBeginner on how to add custom CSS like this to your site.

Hope this helps!
Thread Starter mathildewpforms
(@mathildewpforms)

5 years, 1 month ago
Jade,
Thank you very much, that works!
I would like to tell to everybody from WPforms thank you because you always take the time to answer everybody questions and problems!
- This reply was modified 5 years, 1 month ago by mathildewpforms.
Jade
(@jadeam)

5 years ago

Hi @mathildewpforms,

You’re most welcome and thanks for the kind words! 🙂

Please feel free to post here in case you have any questions.

Have a good one!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘paragraph width / Phlox’ is closed to new replies.