Need help? Check out our Support site, then


Contact form label for comet theme - sizing of boxes & font

  1. instinctiveminds
    Member

    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. 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.

About this Topic