demo problem ! can’t buy with this uggly design

Hi @rodrigomc2000

Thanks for giving the plugin a go!

It looks like your theme sets the HTML font size to a small value.

Try adding this custom CSS under Appearance > Customize > Material Design Forms > Custom CSS.

html {
    font-size: 16px !important;
}

It should fix your form, but may mess with the rest of your theme’s fonts. If it does, feel free to send me a link to your website and I’ll see if we can write some custom CSS to fix both issues.

Thanks,
Angus

Hi,

We add but the design still not looking like your demo! We add the code that you have in this page: https://cf7materialdesign.com/demos/all-field-types/ in our page and you can see difference in some fields…

There’s no way to fix this?

Thanks!

Hi @rodrigomc2000

Your theme uses !important all throughout it’s CSS. That will make fixing these issues difficult, and using the customiser will also be difficult.

Do you have access to change the child theme CSS? If so then I can tell you how to change it to make these issues go away.

This is the file you’ll need to edit. It will probably be in your child theme folder.

https://www.[yourwebsitedomain].com.br/?sccss=1

Thanks,
Angus

Yes, I have access to this whole css !

But we are using important because some css class are not applying without !important

Thanks

Hi @rodrigomc2000

If you just delete (or comment out) these sections, your issues should go away.

input[type="text"], input[type="password"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="month"], input[type="week"], textarea, .chosen-container, .select2-container, .checkbox-sign, .radio-sign {
	  color: #5f727f !important;
    background-color: transparent !important;
}
input[type="text"], input[type="password"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="number"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="month"], input[type="week"], textarea, .combobox-wrapper, #page .woocommerce .select2-container .select2-selection--single, .select2-container .select2-dropdown, .chosen-container-single .chosen-single, .select2-container .select2-choice, select.wpcf7-form-control.wpcf7-select {
	  color: #5f727f !important;
    border: 1px solid #99a9b5 !important;
}

.wpcf7-form input.wpcf7-text, .wpcf7-form textarea {
    padding: 12px !important;
    padding-left: 20px !important;
    margin-top: 15px !important;
}

If you need those input styles in the first two rules for another part of your website, you can leave them there but prefix them all with .woocommerce (or some other class that specifies where to apply those styles).

Thanks,
Angus

Hi,

I delete this and now it looks like the demo! thank you, did you know why this email field is showing the field red yet if we fill a valid mail format: https://i.imgur.com/syUE6mn.png ???

Hi @rodrigomc2000

I think it’s because you’ve got the field duplicated without Material Design styles below.

Thanks,
Angus