Title: font too small, overlapping Last modified: May 3, 2019 --- # font too small, overlapping * Resolved [boodoo31](https://wordpress.org/support/users/boodoo31/) * (@boodoo31) * [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/) * hi there, thanks for this wonderfull and easy plugin. the form is not looking good, i don’t know if it is theme related but : 1- the font is too small 2- input text is overlapping the labels 3- text area label is not visible, hidden because too low * thanks for any help you can provide ! * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ffont-too-small-overlapping%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 5 replies - 1 through 5 (of 5 total) * Plugin Contributor [Addons for Contact Form 7](https://wordpress.org/support/users/contactform7addons/) * (@contactform7addons) * [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/#post-11496822) * Hi [@boodoo31](https://wordpress.org/support/users/boodoo31/) * You can fix the size issue by adding the following custom CSS under Appearance > Customize > Material Design Forms > Custom CSS * ``` html { font-size: 16px; } ``` * Your other issues come from a line of CSS that is being added to the page that sets all the inputs to have no padding. If you can delete that line of CSS then that is ideal, you might find it in Appearance > Customize > Custom CSS, or maybe your theme has it’s own way of adding custom CSS. This is the line: * ``` .wpcf7-form-control:not(.wpcf7-checkbox):not(.wpcf7-radio) { font-size: 14px; height: auto; outline: none; box-shadow: none; width: 100%; border: none; border-bottom: 1px solid #555; padding:0px !important; height:37px; background: transparent; border-radius: 0; } ``` * The part that’s breaking everything is `padding: 0px !important;`. Delete that and you’ll be done. * If you can’t find where to delete that CSS, you can try adding the following under the first lot of CSS I showed you (for `html`). * ``` #cf7md-form .mdc-text-field__input { padding: 20px 12px 6px !important; } #cf7md-form .mdc-text-field--textarea .mdc-text-field__input { padding: 16px; padding-top: 32px; } ``` * Thanks, Angus * Thread Starter [boodoo31](https://wordpress.org/support/users/boodoo31/) * (@boodoo31) * [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/#post-11497311) * hi Angus, thanks for your help, the overlapping issue was fixed by adding your code to md css , but the font size does not change when i input your first code.. Also , the first line of the message field does not show . again, thanks for your help * here’s what i have in template css * ``` .wpcf7-form-group { margin-bottom: 20px; } .wpcf7-form-control:not(.wpcf7-checkbox):not(.wpcf7-radio) { font-size: 13px; padding: 14px; height: auto; outline: none; -webkit-box-shadow: inset 1px 2px 0 rgba(0, 0, 0, 0.06); box-shadow: inset 1px 2px 0 rgba(0, 0, 0, 0.06); border: 1px solid #D9D9D9; width: 100%; } .wpcf7-form-label { text-transform: uppercase; font-size: 11px; color: #969696; font-weight: normal; } .wpcf7-submit { -webkit-box-shadow: none; box-shadow: none; font-size: 13px; font-weight: 700; border-style: solid; border-radius: 3px; -webkit-transition: background-color .15s ease-out; transition: background-color .15s ease-out; } div.wpcf7-response-output { margin: 0 !important; padding: 10px 20px !important; } ``` - This reply was modified 7 years ago by [boodoo31](https://wordpress.org/support/users/boodoo31/). - This reply was modified 7 years ago by [boodoo31](https://wordpress.org/support/users/boodoo31/). * Plugin Contributor [Addons for Contact Form 7](https://wordpress.org/support/users/contactform7addons/) * (@contactform7addons) * [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/#post-11498920) * Hi [@boodoo31](https://wordpress.org/support/users/boodoo31/) * Try changing this * ``` html { font-size: 16px; } ``` * to this * ``` html { font-size: 16px !important; } ``` * Thanks, Angus * Thread Starter [boodoo31](https://wordpress.org/support/users/boodoo31/) * (@boodoo31) * [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/#post-11501384) * that works, Thanks for your support * Plugin Contributor [Addons for Contact Form 7](https://wordpress.org/support/users/contactform7addons/) * (@contactform7addons) * [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/#post-11502654) * Hi [@boodoo31](https://wordpress.org/support/users/boodoo31/) * I’m glad to hear it 🙂 * If you like the plugin (and my support), [adding a review](https://wordpress.org/support/plugin/material-design-for-contact-form-7/reviews/#new-post) would be very helpful. * Thanks, Angus Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘font too small, overlapping’ is closed to new replies. * ![](https://s.w.org/plugins/geopattern-icon/material-design-for-contact-form- 7_f8f8f8.svg) * [Material Design for Contact Form 7](https://wordpress.org/plugins/material-design-for-contact-form-7/) * [Frequently Asked Questions](https://wordpress.org/plugins/material-design-for-contact-form-7/#faq) * [Support Threads](https://wordpress.org/support/plugin/material-design-for-contact-form-7/) * [Active Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/material-design-for-contact-form-7/unresolved/) * [Reviews](https://wordpress.org/support/plugin/material-design-for-contact-form-7/reviews/) * 5 replies * 2 participants * Last reply from: [Addons for Contact Form 7](https://wordpress.org/support/users/contactform7addons/) * Last activity: [7 years ago](https://wordpress.org/support/topic/font-too-small-overlapping/#post-11502654) * Status: resolved