Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 3, 2020 at 7:33 pm #1170107
    beachcitiescryo

    Hi, How would I center all accordion toggle titles on my website?

    January 4, 2020 at 6:21 am #1170191
    Rikard

    Hey beachcitiescryo,

    Please try the following in Quick CSS under Enfold->General Styling:

    p.toggler {
  text-align: center;
}

    Best regards,
    Rikard

    January 6, 2020 at 8:56 pm #1170841
    beachcitiescryo

    That centers the text great, thanks. How would I center the plus sign as well? What if I would like this on only specific instances of the accordion toggle titles?

    January 7, 2020 at 6:20 am #1170922
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (min-width: 991px) {
.toggle_icon {
    left: 38%;
}
}

    Best regards,
    Rikard

    January 7, 2020 at 8:27 pm #1171187
    beachcitiescryo

    Thank you for that code. I see that the code you provide moves the + icon over. The problem with that is the titles are different lengths so the plus “+” is in different places and sometimes overlaps the title text. I solved this by inserting the code below to remove the “+” which i found in another thread 

    .toggle_icon {
    display: none;
}

    I then added the plus manually to the Toggle title but the title is still not centered. When I use the first code it somewhat centers it but it is not a true center 

    p.toggler {
  text-align: center;
}

    I attached a screenshot link in the private section below. Things are not 100% center. Is there a way to resolve this for all the instances of this. In my site i’m using the accordion element on several pages and not are equal distances.

    January 8, 2020 at 4:15 pm #1171502
    Yigit

    Hi,

    Please add following code to Quick CSS as well

    .js_active .toggler {
    padding: 10px 3px;
}

    Best regards,
    Yigit

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