How to change font size of a contact form w/o changing font size on rest of site

• 

  pdssn · Member · Jan 15, 2015 at 2:44 am

  • Copy link
  • Add topic to favorites

  My website is pdssn.org which is the twenty ten theme. I’ve created a survey using the standard contact form. The size of the font in the contact form doesn’t match the font style or size of the rest of the site. The wording is too small and changes sizes. How do I find and fix the CSS so that I only modify the size and font of the contact form?

  Here’s the url to the page containing the contact form I want to modify: http://pdssn.org/join-us/member-interest-survey/

  Thanks in advance for any help you can offer!

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 15, 2015 at 4:07 am

  • Copy link

  I assume you are talking about all the text outside of the text input areas. Give this a try.

  .entry-content label {
      font-size: 16px;
  }

• 

  pdssn · Member · Jan 15, 2015 at 4:38 am

  • Copy link

  Wow! I’ve never changed anything on my website using code before. It’s amazing how easy it is when you know what to do! Thank you so much!

  Would you mind taking one more look for me? Ideally, I’d like the font of the text outside of the text input areas in the content form to match the font style and size of the text outside of the form. In other words, I’d like the words “Name”, “Email”, “Best contact phone number”, etc, to match the words “PDSSN is here to support you and your family” etc.

  Do you know how to do this? I don’t even know what the default font style and size are on my site. Thanks again for your help!

• 

  thesacredpath · Member · Jan 15, 2015 at 6:49 pm

  • Copy link

  Sure we can do that. Change what I had given earlier to this:

  .contact-form label {
      font-family: Georgia;
      font-size: 16px;
      font-weight: normal !important;
      color: #333;
  }

  I slightly changed the CSS class selector and then added a color and font weight declaration to match the text in the body of your page.

• 

  pdssn · Member · Jan 15, 2015 at 7:08 pm

  • Copy link

  That worked beautifully! Thanks!

  Final questions (I think) – Would you please let me know how I can change the sizes of the “text” field to be as wide as the “textarea” field? I’d also like to reduce the number of rows in the “textarea” without changing the width of the textarea.

  Thanks again for sharing your expertise with me!

• 

  thesacredpath · Member · Jan 16, 2015 at 8:44 pm

  • Copy link

  Hi, give the following a try to widen the text fields to the same as the text area.

  .contact-form input[type="text"], .contact-form input[type="email"] {
      width: 80% !important;
  }

• 

  pdssn · Member · Jan 16, 2015 at 9:07 pm

  • Copy link

  Perfect! Thank you so much!

• 

  thesacredpath · Member · Jan 17, 2015 at 12:09 am

  • Copy link

  You are welcome.