WordPress.com

1. instinctiveminds
   Member
   Oct 29, 2012, 10:41 PM

   I am wanting to edit the size of the contact boxes so they are smaller then the default in comet theme and increase the text size of the wording such as First Name, Last Name etc. I am using the below but can't seem to get it. Can someone explain the difference between contact-form label & .contact-form label span.

   .contact-form label {
   font-family: "Times New Roman", Arial, sans-serif;
   font-size: 60%;
   }

   .contact-form label span {
   font-size: 40%;
   }

   The blog I need help with is instinctiveminds.com.au.

2. designsimply
   Staff
   Nov 5, 2012, 9:34 PM

   The difference between contact-form label & .contact-form label span in this specific form's HTML is that the labe is the text and the span is the "required" notice.

   Here's a trick that might help you in the future. A quick way to visualize the differences in selectors like those would be to add borders around each and preview the change. It makes stuff easy to spot in a pinch. :)

   .contact-form label {
   	border: 1px solid red;
   }
   
   .contact-form span {
   	border: 1px solid blue;
   }

   It sounds like you're really trying to change the input fields and the text area sizes though (the boxes). Try updating with this:

   .textwidget .contact-form input[type="text"],
   .textwidget .contact-form input[type="email"],
   .textwidget .contact-form textarea {
   	width: 255px !important;
   }

Topic Closed

This topic has been closed to new replies.