Custom CSS for Toggles

  • Resolved jonibrennan

    (@jonibrennan)


    5 years, 7 months ago

    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 to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author Aurovrata Venet

    (@aurovrata)

    5 years, 7 months ago

    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.