Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 6, 2015 at 11:47 pm #469315
    jmerithew

    How do I add some space to the bottom of an accordion so it doesn’t overlap the next paragraph below the accordion?

    Example of the issue:
    overlap

    Source page for the issue: https://www.relevantmathematics.com/curriculum-maps/grade-8/unit-3-linear-relationships (scroll down about halfway on the page.

    July 7, 2015 at 4:05 pm #469762
    Elliott

    Hey jmerithew!

    Add this to your custom CSS.

    .togglecontainer > section:last-child .single_toggle {
  margin-bottom: 30px !important;
}

    Regards,
    Elliott

    January 5, 2016 at 5:47 pm #560051
    rkb317

    Hi I’m having a similar issue except the plus signs are overlapping the title – would the same code work?

    January 5, 2016 at 5:48 pm #560054
    Yigit

    Hi!


    @rkb317     It may not work. Please try and if it does not work, please post the link to your page and point out the issue :)

    Cheers!
    Yigit

    January 5, 2016 at 6:15 pm #560070
    rkb317

    hmmm so I have this code in the quick css to solve the headers to line up with the accordion graphics on this page: Camp Sessions (link below)
    code: .togglecontainer .single_toggle:first-child .toggler, .togglecontainer .taglist + .single_toggle .toggler {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    }
    .main_color, .main_color .site-background, .main_color .first-quote, .main_color .related_image_wrap, .main_color .gravatar img .main_color .hr_content, .main_color .news-thumb, .main_color .post-format-icon, .main_color .ajax_controlls a, .main_color .tweet-text.avatar_no, .main_color .toggler, .main_color .toggler.activeTitle:hover, .main_color #js_sort_items, .main_color.inner-entry, .main_color .grid-entry-title, .main_color .related-format-icon, .grid-entry .main_color .avia-arrow, .main_color .avia-gallery-big, .main_color .avia-gallery-big, .main_color .avia-gallery img, .main_color .grid-content, .main_color .av-share-box ul, #top .main_color .av-related-style-full .related-format-icon, .main_color .related_posts.av-related-style-full a:hover, .main_color.avia-fullwidth-portfolio .pagination .current, .main_color.avia-fullwidth-portfolio .pagination a {
    background-color: #ffffff;
    color: #666666;
    }
    .js_active .toggler {
    padding: 9px 3px;
    }

    But I think it’s screwing up my testimonial page in the accordion testimonials, link below

    January 6, 2016 at 1:30 pm #560483
    Vinay

    Hi!

    hi Please add this to your quick css 

    
.toggle_icon {
     display:none;
}

    Best regards,
    Vinay

    January 6, 2016 at 4:56 pm #560617
    rkb317

    Thank you Vinay!
    What if I wanted the bars to look colored so it’s more like a button?
    Thanks!

    January 7, 2016 at 7:00 am #561018
    Rikard

    Hi,

    Please try this as well:

    p.toggler {
background-color:red !important;
}

    Thanks,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.