Support » Plugin: Material Design for Contact Form 7 » CSS Conflict

  • Resolved Thomas Reinholdt

    (@bananajones)


    Hi there

    Thanks for great work and plugin. We have bought your plugin but have en issue with the css from the current theme we are using, it’s overriding your css, I have tried but still doesn’t work?

    #cf7md-form span.wpcf7-form-control-wrap {
    overflow: visible;
    }

    Would be happy to hear from you

    Best regards

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @bananajones

    First thing I noticed is that you need to set the font-size on your html tag.

    html {
      font-size: 16px;
    }

    Sometimes this can mess with other parts of your site. Let me know if it does.

    You also have a custom rule that is overriding the padding of the outlined fields with icons and causing the icon and text to overlap. You should be able to remove that entire rule (the html font size should be the only fix needed).

    I can’t actually see the issue you’re referring to though. Can you let me know what to look for and I’ll let you know how to fix it?

    Thanks,
    Angus

    Thomas Reinholdt

    (@bananajones)

    Hi Angus

    Thanks for quick support and answers!

    The HTML Font size did the trick, though I have one more issue, the calendar icon in the birthday field overlaps the date in the example with the outlined fields with icons but in the boxed fields with icons example is working?

    Thanks again for quick reply and great support

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    Hi @bananajones

    That’s the overlap issue I was referring to. You should be able to delete this rule from your custom styles.

    #cf7md-form .mdc-text-field--outlined .mdc-text-field__input {
        display: -webkit-flex !important;
        display: -ms-flexbox !important;
        display: flex !important;
        padding: 12px 16px 14px !important;
        border: none !important;
        background-color: transparent;
        z-index: 1;
    }

    It’s the padding here that is the issue. If you need the rest of these rules for some reason, just delete the padding.

    Thanks,
    Angus

    Thomas Reinholdt

    (@bananajones)

    Hi @contactform7addons

    Worked like a charm, it was a left over from my test to fix the css 🙂

    Thanks a lot, superb and quick support!

    Best regards
    Thomas

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.