Title: CF7 Width Responsive Issue
Last modified: April 29, 2020

---

# CF7 Width Responsive Issue

 *  Resolved [bigfootwebdev](https://wordpress.org/support/users/bigfootwebdev/)
 * (@bigfootwebdev)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/cf7-width-responsive-issue/)
 * Hi,
 * In the last couple days, all of a sudden the width of selected CF7 boxes are 
   no longer responsive (i.e. 100%). They are short.
    I have used the Chrome Inspect
   function to help me out in finding what could be a cause of the issue. I have
   updated, in the Additional CSS section, and put the following. This didn’t help.
   At first I put this: .wpcf7 {width:100% !important;} That didn’t work. Then I
   put this: .wpcf7-form {width:100% !important;} Also didn’t work. Then I put the
   below.
 * .wpcf7-form input[type=”text”], input[type=”email”], input[type=”url”], 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”], input[type=”color”], select, textarea {width:100%!
   important;}
 * I have gone to the theme editor and added the below in each [@media](https://wordpress.org/support/users/media/)
   section. This didn’t help either.
    .wpcf7-form.cf7-style { width: 100%!important;}
 * I am unsure what I have done to cause this. There is nothing in Elementor style
   tab that isn’t default. I haven’t added padding, etc…
    This is maybe only in 
   the last few days.
 * Prominent on the Home, Subscription, Gift Voucher pages. Not an issue on the 
   Order Forms pages for some reasons.
 * Any help will be appreciated.
    Any questions let me know.
 * Thank you for your time.
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcf7-width-responsive-issue%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Plugin Author [Takayuki Miyoshi](https://wordpress.org/support/users/takayukister/)
 * (@takayukister)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/cf7-width-responsive-issue/#post-12750763)
 *     ```
       label {
        display:inline-block;
        margin-bottom:.5rem
       }
       ```
   
 * This `display:inline-block` property makes the “100%” short.
 *  Thread Starter [bigfootwebdev](https://wordpress.org/support/users/bigfootwebdev/)
 * (@bigfootwebdev)
 * [6 years, 1 month ago](https://wordpress.org/support/topic/cf7-width-responsive-issue/#post-12766999)
 * Hi Takayki,
 * Thanks for replying.
 * I see what you mean.
 * I had them like this:
    <label> Your Email * [email* your-email] </label>
 * When hey were meant to be like this.
    <label> Your Email * </label> [email* your-
   email]
 * Don’t know why I did that.
    Thanks for the reply and help. I will change this
   topic to resolved.

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

The topic ‘CF7 Width Responsive Issue’ 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/)

 * 2 replies
 * 2 participants
 * Last reply from: [bigfootwebdev](https://wordpress.org/support/users/bigfootwebdev/)
 * Last activity: [6 years, 1 month ago](https://wordpress.org/support/topic/cf7-width-responsive-issue/#post-12766999)
 * Status: resolved