font too small, overlapping

  • Resolved boodoo31

    (@boodoo31)


    7 years ago

    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 to see the link]

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

    (@contactform7addons)

    7 years ago

    Hi @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

    (@boodoo31)

    7 years ago

    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.
    • This reply was modified 7 years ago by boodoo31.
    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    7 years ago

    Hi @boodoo31

    Try changing this

    html {
  font-size: 16px;
}

    to this

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

    Thanks,
    Angus

    Thread Starter boodoo31

    (@boodoo31)

    7 years ago

    that works, Thanks for your support

    Plugin Contributor Addons for Contact Form 7

    (@contactform7addons)

    7 years ago

    Hi @boodoo31

    I’m glad to hear it 🙂

    If you like the plugin (and my support), adding a review 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.