Title: Custom CSS for Toggles
Last modified: September 25, 2020

---

# Custom CSS for Toggles

 *  Resolved [jonibrennan](https://wordpress.org/support/users/jonibrennan/)
 * (@jonibrennan)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/custom-css-for-toggles/)
 * The default spacing between toggles is too wide (really, all the components of
   the contact form are too far apart). I have added CSS which successfully moves
   them closer together, but then the toggle box is no longer clickable to open.
 * Can someone point me to a better way to accomplish this change in spacing? Thanks!
 * Here is the code I used: (I simply added margin to the bottom)
    <div class=”container
   cf7sg-collapsible” id=”TmLJHw” style=”margin-bottom: -5vh”> <div class=”cf7sg-
   collapsible-title”><span class=”cf7sg-title”>I’d Like You to Contact Me About
   </span></div> <div class=”row”> <div class=”columns full cf7sgfocus”> <div class
   =”field”><label></label>[checkbox contact-me-about “Fire Alarm” “Central Station
   Monitoring” “Bi-Directional Amplifier (BDA)” “Clean Agent (FM200, Novec 1230)”“
   Low- & High-Pressure CO2” “MIL-SPEC Parts” “Sprinkler & Standpipe Systems” “Hydrants,
   Pumps & Backflows” “Extinguishers” “Emergency & Exit Lighting” “Kitchen Systems”“
   Industrial Dry Chem Systems” “Other – Describe in comment section below”] <br
   > <br> <p class=”info-tip”>Please check all that apply</p> </div> </div> </div
   > </div>
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fcustom-css-for-toggles%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/)
 * (@aurovrata)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/custom-css-for-toggles/#post-13456512)
 * > The default spacing between toggles is too wide (really, all the components
   > of the contact form are too far apart).
 * the plugin does not style forms (with the exception of a a few things), this 
   is left to your theme to do.
 * THe page you linked has 50px padding added to the top of each row container. 
   THis comes from your theme.
 * When you set your row of margin-bottom -5vh, you’re basically making each row
   appear below the 50px top padding of the subsequent row, and this is the reason
   why….
 * >  but then the toggle box is no longer clickable to open.
 * the top row is now below the next row, so your mouse is not able to click on 
   it.
 * You need to better understand how your theme affects your forms.

Viewing 1 replies (of 1 total)

The topic ‘Custom CSS for Toggles’ is closed to new replies.

 * ![](https://ps.w.org/cf7-grid-layout/assets/icon-256x256.png?rev=1834229)
 * [Smart Grid-Layout Design for Contact Form 7](https://wordpress.org/plugins/cf7-grid-layout/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/cf7-grid-layout/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/cf7-grid-layout/)
 * [Active Topics](https://wordpress.org/support/plugin/cf7-grid-layout/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/cf7-grid-layout/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/cf7-grid-layout/reviews/)

 * 1 reply
 * 2 participants
 * Last reply from: [Aurovrata Venet](https://wordpress.org/support/users/aurovrata/)
 * Last activity: [5 years, 7 months ago](https://wordpress.org/support/topic/custom-css-for-toggles/#post-13456512)
 * Status: resolved