Hello friends! I'm Carlos, from Byteweb.es, and in today’s video, we’re going to cover a highly requested topic: how to align icons in the Elementor accordion widget when the header makes a line break. As you can see, I’ve forced some line breaks to illustrate the problem, and the icon appears centered. However, with this tutorial, we’ll be able to align them correctly, even when the header spans multiple lines.
Steps to follow:
Content Preparation:
Let’s start from scratch. I’ll create an example structure using the accordion widget. Let’s find the accordion widget in Elementor and add some long titles to simulate the problem. In this case, I’ve duplicated some accordions and added different content to better visualize the changes.
Force Line Breaks:
Let's check how the icons become misaligned when the title spans multiple lines.
Custom CSS Solution:
We access the advanced options of the widget and select the “Custom CSS” tab. Here, we will paste the following CSS code. (This code will be available at the end of the tutorial).
Additional Customization:
If we want to further fine-tune the alignment, we can experiment with the margin-top value in the CSS code. This is useful if font size or line spacing affects the alignment. We refresh the page to apply the changes and observe how the alignment improves.
And that’s it! With these simple steps, we will be able to align the icons in the Elementor accordion widget, even when the headers span across multiple lines. If you found this tutorial useful, don’t forget to give it a “Like,” subscribe to the channel, activate the bell for future notifications, and leave us any questions or doubts in the comments. See you in future videos! See you later!
.elementor-widget-n-accordion .en-accordion-item-title { align-items: start; } selector i{ margin-top: 10px; }
