CSS Conflicts with Jetpack

  • Resolved ourcore

    (@ourcore)


    10 years, 3 months ago

    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://ww.wp.xz.cn/plugins/contact-form-7/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Neil Murray

    (@buzztone)

    10 years, 3 months ago

    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

    (@ourcore)

    10 years, 3 months ago

    See the first two fields on the contact form here: http://marioparra.me. Yes, I just wanted to see if there was a solution that didn’t involve writing extra CSS.

    Neil Murray

    (@buzztone)

    10 years, 3 months ago

    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

    (@ourcore)

    10 years, 3 months ago

    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.