Accordian items overlapping other items

How do you want this “problem” to be solved conceptually? What do you want to happen when the accordion item in question is expanded?

By their very nature, accordions collapse to take minimal space when closed, but will expand to display their content when opened. The content will have to be displayed somewhere to be visible, so the accordion pushes the item below it down so it can have space to display the content.

While your observation may be undesirable, this is the very nature of accordions — this is how they work — and I don’t see many options to fix this “problem” without introducing even more (potentially) undesirable effects.

The last accordion item “Performance & Payments” is still there when the “Seamless Integration” is expanded: but it goes into the white area, making it invisible (white text on a white background).

So the only reasonable way to fix this would be to increase the height of the blue section background… so that when pushed down, the last item will still be inside the blue section background — making it visible.

If this suggested solution doesn’t sit well with you or if you’re unable to implement it, then please get in touch with your theme’s vendor for help with this.

This accordion feature is from the Enfold theme you’re using. Because Enfold is a commercial theme, we’re unable to install it help you any further with this: https://themeforest.net/item/enfold-responsive-multipurpose-theme/4519990/support

Good luck!

Thanks for your reply. I agree with your point however I wanted to increase that blue section height with css but I noticed it already has max-height set. Thus, I increased the blue section background image height manually by photoshop as it was an img. I mark this as solved.