Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • August 9, 2021 at 9:58 pm #1315903
    enfold-94556

    How do I prevent longer titles from overlapping the “+” symbol at the right side of the “Elegant” mode accordion?

    Here’s a visual. Text should stay approximately on the left side of the hand-drawn yellow line in this image.
    visual

    August 11, 2021 at 5:56 am #1316184
    Rikard

    Hey enfold-94556,

    Thanks for the screenshot. Could you post a link to where we can see the actual element on your site please?

    Best regards,
    Rikard

    August 12, 2021 at 12:23 am #1316335
    enfold-94556

    Here is a private link to the site. Sorry, I should have included that from the start.

    Best,
    Raina

    August 13, 2021 at 5:41 am #1316523
    Rikard

    Hi,

    Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (min-width: 768px) and (max-width: 990px) {
p.toggler {
  padding-right: 10%; 
}
}

    Best regards,
    Rikard

    August 17, 2021 at 12:32 am #1317020
    enfold-94556

    Hey Rikard,
    Iimage of inspector tool
    1. added the code
    2. cleared the hosting side cache
    3. opened a new browser and cleared cache on that
    4. loaded the site

    No effect.

    The Inspector tool shows that the 10% margin rule is being overwritten by some other CSS rule.

    August 17, 2021 at 1:58 am #1317021
    amrod1

    try padding-right: 10% !important;

    August 17, 2021 at 7:20 pm #1317198
    enfold-94556

    Adding the !important caused this to show.

    However, the 10% was not enough. 60px seems to work well. I checked on desktop at a wide variety of browser widths, and on a phone.

    This is needed on all screen sizes, so I removed the media query. My final code looks like this:

    p.toggler {
    padding-right: 60px !important;
    }
    }

    However, this is also affecting the accordions with the “Minimal” styling. Those don’t need this styling, since they don’t have the + icon on the right.

    Is there are solution that will only affect the accordions / toggles that use the “Elegant” styling?

    August 18, 2021 at 3:48 am #1317222
    Rikard

    Hi,

    Thanks for the update. Please try this CSS instead:

    .av-elegant-toggle p.toggler {
  padding-right: 60px !important;
}

    Best regards,
    Rikard

    August 18, 2021 at 8:51 pm #1317378
    enfold-94556

    Checked on desktop: Edge, Firefox and on mobile: Chrome on Android; works as intended.

    Thanks, Rikard!

    August 20, 2021 at 5:37 am #1317559
    Rikard

    Hi,

    Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    August 20, 2021 at 10:22 pm #1317677
    enfold-94556

    OK to close.

    August 23, 2021 at 4:40 am #1317864
    Rikard

    Hi,

    Thanks for letting us know, I’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Accordion title length / spacing – text overlapping "+" symbol’ is closed to new replies.