Contact Form 7 - WordPress Alignment


I have my check boxes vertical but it does not look like the spacing is correct from the boxes to letters like it does on other sites. See the below link. How can I get the text to show next to the text box rather than above and.or below it?
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

ResQTek NancyPresident @ ResQTekCommented:
In the CSS for the list item input element, the display: block is causing the visual line return. With the change below, the labels seems to move next to the checkboxes.

.wpcf7-list-item input {
    /* display: block; */
    display: inline-block; /* this puts the label next to the checkbox */
    margin: -1px 3px -1px -1px; /* changed the right margin for space after the checkbox */

Open in new window

Instead, you will add the display: block to the list item span style, as shown:

span.wpcf7-list-item {
    margin-left: 0.5em;
    display: block; /* added this to create the line return between list items */

Open in new window

If you do not want the styles to change on all of your forms, I think you can put them right in the form and it should override the global styles.

Hope this helps...

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
WO2015Author Commented:
The second one worked perfect!  Thank you so much!!
ResQTek NancyPresident @ ResQTekCommented:
You're welcome. :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.