Contact Form 7
Check Boxes are too far apart (7 posts)

  1. hehafner
    Posted 4 years ago #

    This is my 4th or 5th contact form I have created using Contact Form 7. I like the ease of use this has to offer. There is only really one thing I seem to have trouble with... When using checkboxes, the boxes are spread across the column and difficult to understand why they are there. How do you suggest I bring them together so they make sense?


    Heidi Hafner


  2. Takayuki Miyoshi
    Plugin Author

    Posted 4 years ago #

    In your theme's custom/layout.css #243

    .format_text input, #commentform input, #commentform textarea {
        border-width: 0.071em;
        padding: 0.214em;
        width: 45%;

    This "width: 45%" is also applied to checkboxes.

    Firebug is very useful for this kind of jobs.

  3. hehafner
    Posted 3 years ago #


    Thank you for your help... I do use firebug. When I identified the class I attempted various changes even making the width less but nothing seems to be working.

    I tried using the tag you mentioned above... and yes it does shrink the space between the check boxes, but it shrinks everything else too! I only need the the checkboxes shrunk...

    I tried using the .wpcf7-form-control-wrap packet tag, or even the .wpcf7-checkbox or .wpcf7-checkbox wpcf7-exclusive-checkbox tags... nothing is pulling the checkboxes ONLY together!

    I would appreciate any help you can offer... For some reason this problem eludes me.

  4. Takayuki Miyoshi
    Plugin Author

    Posted 3 years ago #

    Don't forget CSS selector's specificity calculation rules.

    Try adding some parent selectors like .wpcf7 .wpcf7-checkbox

  5. hehafner
    Posted 3 years ago #

    I went to the forum for my theme, Thesis... I found a fix there that doesn't change the rest of my page.

    .custom .format_text input, #commentform input, #commentform textarea {

    It works!

  6. Thain
    Posted 3 years ago #

    hum... where is this file, layout.css ? I don't see it...

  7. hehafner
    Posted 3 years ago #

    Thain, the layout.css file is inside your theme's custom folder... On the site I'm building, it's path is here /public_html/wp-content/themes/thesis_182/custom/layout.css

    Hope this helps...

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Contact Form 7
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic