Title: Form Field Width Ignored
Last modified: July 4, 2021

---

# Form Field Width Ignored

 *  [Squidpeg9](https://wordpress.org/support/users/squidpeg9/)
 * (@squidpeg9)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/form-field-width-ignored/)
 * Hello, I am trying to make the width of the form fields more narrow/responsive.
   I have tried several different CSS options, but they’ve all been ignored. Here
   is the current code I have in the stylesheet:
 * .wpcf7 textarea, .wpcf7 select, .wpcf7 input[type=text], input[type=email], input[
   type=url], input[type=password], input[type=search], input[type=number], input[
   type=tel], input[type=range], input[type=date], input[type=month], input[type
   =week], input[type=time], input[type=datetime], input[type=datetime-local], {
   
   width: 50% !important; }
 * The input fields are still too width for mobile. What else can I try?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fform-field-width-ignored%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  [Erik](https://wordpress.org/support/users/codekraft/)
 * (@codekraft)
 * [5 years, 3 months ago](https://wordpress.org/support/topic/form-field-width-ignored/#post-14623918)
 * hi
 * Assuming that this is a question related to elementor and WordPress styling, 
   unrelated to cf7.
 * The problem is originated because you are using a column 33% of the width but
   its content is larger than the container, so you need to double check the with
   of the form elements.
 * you need to style the first elements inside the <form> and not the last
 *     ```
       <form>
         <p style="width: 100%"> <!-- need to style this-->
           <label>
             <input style="width: 100%"> <!-- but you are styling this and his container is 100% -->
             </input>
           </label>
         </p>
       </form>
       ```
   
 * this is an example
 *     ```
       form.wpcf7-form.init > * {
           max-width: 50%;
       }
       form.wpcf7-form > *:last-of-type {
           max-width: 100%;
       }
       ```
   
 * hope it helps!

Viewing 1 replies (of 1 total)

 The topic ‘Form Field Width Ignored’ 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/)

## Tags

 * [width](https://wordpress.org/support/topic-tag/width/)

 * 1 reply
 * 2 participants
 * Last reply from: [Erik](https://wordpress.org/support/users/codekraft/)
 * Last activity: [5 years, 3 months ago](https://wordpress.org/support/topic/form-field-width-ignored/#post-14623918)
 * Status: not resolved