WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. hehafner
    Member
    Posted 2 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?

    http://storytellin.com/contact/booking/

    Thanks,
    Heidi Hafner

    http://wordpress.org/extend/plugins/contact-form-7/

  2. Takayuki Miyoshi
    Member
    Plugin Author

    Posted 2 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
    Member
    Posted 2 years ago #

    Takayuki,

    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
    Member
    Plugin Author

    Posted 2 years ago #

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

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

  5. hehafner
    Member
    Posted 2 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 {
    width:auto;
    }

    It works!

  6. Thain
    Member
    Posted 2 years ago #

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

  7. hehafner
    Member
    Posted 2 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

About this Topic