CSS Conflict

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

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

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

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