Title: Checkboxes not aligned
Last modified: August 30, 2016

---

# Checkboxes not aligned

 *  Resolved [recapit](https://wordpress.org/support/users/recapit/)
 * (@recapit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/)
 * I want my checkboxes to render as blocks, so I added the code to my custom css.
   Seems to work fine, however, only hte first checkbox is aligned correctly. Seconder,
   third, etc seem to have a space or rab in front and are not aligned in sink with
   the first checkbox. How can I fix this.
 * Example: [http://goo.gl/VdcibJ](http://goo.gl/VdcibJ)
 * [https://wordpress.org/plugins/contact-form-7/](https://wordpress.org/plugins/contact-form-7/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6704789)
 * See [http://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/](http://contactform7.com/custom-layout-for-checkboxes-and-radio-buttons/)
   ​
   Also see [Styling Contact Form](http://kb.cf7skins.com/styling-contact-form-7-forms/)
   for a general explanation of styling CF7 forms using CSS.
 *  Thread Starter [recapit](https://wordpress.org/support/users/recapit/)
 * (@recapit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6704794)
 * I’m using the code, like I mention in my post ‘…added the code to my custom css’.
   Just follwed the steps explained by CF7 on th epages mentioned by you.
 * In there example, checkboxes are aligned correctly, with same css code.
    On my
   site, they are not. So, it’s not working like it should.
 *  [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6704989)
 * Please include all your input in the Form of the CF7 interface.
 *  Thread Starter [recapit](https://wordpress.org/support/users/recapit/)
 * (@recapit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6704992)
 *     ```
       <p>
       Voornaam        [text* Voornaam]
       Achternaam       [text* Achternaam]
       Telefoonnummer          [tel* Telefoon]
       E-mail                [email* Email]
       Geboortedatum      [text* Gb-datum]
       Bondsnummer [text* Bondsnummer]
       </p>
   
       <h2>Geef hieronder je voorkeur aan:</h2>
   
       <strong>Donderdagochtend (District) </strong><br />
       [checkbox Do_Ochtend "Dames 35+ (2DE, 3DD)"]
   
       <strong>Donderdagavond (District) </strong><br />
       [checkbox Do_Avond "Dames 17+ (4DD)" "Gemengd 17+ DD, HD, 2GD)"]
   
       <strong>Vrijdagavond (District) </strong><br />
       [checkbox Vr_Avond "Dames 35+ 4DD" "Heren 35+ 4HD" "Gemengd 35+ (DD, HD, 3GD)"]
   
       <strong>Zaterdag (District) </strong><br />
       [checkbox Zaterdag "Dames 17+ (2DE, 3DD)" "Dames 35+ (4DD)" "Heren 17+ (4HE, 2HD)" "Heren 35+ (4HE, 2HD)" "Heren 35+ (2HE, 3HD)""Heren 35+ (4HD)" "Gemengd 17+ (DE, HE, DD, HD, GD)" "Gemengd 35+ (DE, HE, DD, HD, GD)""Gemengd 35+ (DD, HD, 2GD)"]
   
       <strong>Zondag (District)</strong><br />
       [checkbox Zondag_District "Heren 17+ (4HE, 2HD)" "Gemengd 17+ (DE, HE, DD, HD, GD)"]
   
       <strong>Zondag (Landelijk)</strong><br />
       [checkbox Zondag_Landelijk "Dames (4DE, 2DD)" "Heren (4HE, 2HD)" "Heren 35+ (4HE, 2HD)" "Gemengd (2DE, 2HE, DD, HD, 2GD)" "Gemengd 35+ (DE, HE, DD, HD, GD)"]
   
       <strong>Wil graag in één team spelen met:</strong>
       (Namen en bondsnummers opgeven)<br />
       [textarea In_team_spelen_met]
   
       <p><strong>Opmerkingen / Voorkeuren aanvang spelen ochtend of middag</strong> [textarea your-message] </p>
       <p>Vink deze even aan als je een mens bent en lid van TC Breda</p>
       [recaptcha]
   
       <p>[submit "Verzenden naar Technische Commissie"]</p>
       ```
   
 *  [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6705091)
 * I have inspected you form at the link provided. It seems the code below is causing
   the problem
 *     ```
       ​ span.wpcf7-list-item {
       margin-left: 0.5em;
       }
       ```
   
 * suggest you comment out that line of CSS. Line 58 of styles.css​​
 *  Thread Starter [recapit](https://wordpress.org/support/users/recapit/)
 * (@recapit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6705099)
 * Thanks! That did the trick.
 * As is is in the CF7 standard CSS, every time the plugin is updates, my changes
   wil be lost. So, is is possible for the CF7 developers to change this?
 *  [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6705167)
 * Kindly provide me with the link to the current location of the form so that I
   would be able to answer your follow up question.
 *  Thread Starter [recapit](https://wordpress.org/support/users/recapit/)
 * (@recapit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6705173)
 * The form will be online untill december 1st:
 * [Link](http://goo.gl/XKFZtf)
 *  [davmerit](https://wordpress.org/support/users/davmerit/)
 * (@davmerit)
 * [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6705178)
 * > As is is in the CF7 standard CSS, every time the plugin is updates, my changes
   > wil be lost.
 * Right on, you could have also done something like the code below and added your
   CSS via a child theme or a custom CSS plugin to override what’s in your WP theme
   style sheet.
 *     ```
       .wpcf7 .wpcf7-list-item {
       margin-left: none;
       }
       ```
   
 * > So, is is possible for the CF7 developers to change this?
 * Probably not considering millions of people use CF7 and have not had this problem.
   CF7 CSS styling is minimal and that make a blend with most themes out there.
 * Your issue appears to be due to following the CSS styling applied to the standard
   HTML form elements in your WP theme style sheet:
 *     ```
       .first {
       margin-left: 0 !important;
       padding-left: 0 !important;
       }
   
       .last { margin-right: 0 !important;
       padding-right: 0 !important;
       }
       ```
   

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Checkboxes not aligned’ is closed to new replies.

 * ![](https://ps.w.org/contact-form-7/assets/icon.svg?rev=2339255)
 * [Contact Form 7](https://wordpress.org/plugins/contact-form-7/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/contact-form-7/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/contact-form-7/)
 * [Active Topics](https://wordpress.org/support/plugin/contact-form-7/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/contact-form-7/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/contact-form-7/reviews/)

## Tags

 * [align](https://wordpress.org/support/topic-tag/align/)
 * [checkboxes](https://wordpress.org/support/topic-tag/checkboxes/)

 * 9 replies
 * 2 participants
 * Last reply from: [davmerit](https://wordpress.org/support/users/davmerit/)
 * Last activity: [10 years, 6 months ago](https://wordpress.org/support/topic/checkboxes-not-aligned-1/#post-6705178)
 * Status: resolved