Title: CSS Conflicts with Jetpack
Last modified: August 31, 2016

---

# CSS Conflicts with Jetpack

 *  Resolved [ourcore](https://wordpress.org/support/users/ourcore/)
 * (@ourcore)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/css-conflicts-with-jetpack/)
 * Hey, guys,
 * I’m using CF7 and I’d also like to try out Jetpack for other features, but it’s
   overriding some of CF7’s styles. There’s a doc page for this on CF7’s website,
   but it’s for an older version of Jetpack.
 * By default, the contact form module in Jetpack is disabled, but its stylesheet
   is still being applied. Anyone know how to get around this?
 * Thanks in advance!
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

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

 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/css-conflicts-with-jetpack/#post-7079943)
 * Please include a link to a form that shows the problem. You should be able to
   overcome it by adding a unique ID or Class to your CF7 forms.
 *  Thread Starter [ourcore](https://wordpress.org/support/users/ourcore/)
 * (@ourcore)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/css-conflicts-with-jetpack/#post-7079945)
 * See the first two fields on the contact form here: [http://marioparra.me](http://marioparra.me).
   Yes, I just wanted to see if there was a solution that didn’t involve writing
   extra CSS.
 *  [Neil Murray](https://wordpress.org/support/users/buzztone/)
 * (@buzztone)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/css-conflicts-with-jetpack/#post-7079950)
 * Jetpack is not overriding CF7’s CSS as you suggest – it’s overriding your themes
   CSS.
 * The solution involves writing **better** CSS.
 * I’d use a different class to that used by Jetpack to style the CF7 forms.
 * CURRENT:
 *     ```
       .contact-form input.input-field {
           display: inline;
           font-size: 20px;
           height: 60px;
           max-width: 100% !important;
           width: 100% !important;
       }
       ```
   
 * CHANGE TO:
 *     ```
       .wpcf7 input.input-field {
           display: inline;
           font-size: 20px;
           height: 60px;
           max-width: 100%;
           width: 100%;
       }
       ```
   
 * Using `!important` is really bad practice.
 *  Thread Starter [ourcore](https://wordpress.org/support/users/ourcore/)
 * (@ourcore)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/css-conflicts-with-jetpack/#post-7079953)
 * Yes, I agree. This was the CSS I wrote for the form before I integrated it with
   CF7. I took another look and realised it was a pretty simple fix. I’ll apply 
   this shortly. Thanks.
 * EDIT: Also, had to use higher specificity (i.e. `.contact-form .wpcf7 input.input-
   field`) to override Jetpack’s styles.

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

The topic ‘CSS Conflicts with Jetpack’ 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/)

 * 4 replies
 * 2 participants
 * Last reply from: [ourcore](https://wordpress.org/support/users/ourcore/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/css-conflicts-with-jetpack/#post-7079953)
 * Status: resolved