Title: text not vertically aligned Last modified: June 19, 2020 --- # text not vertically aligned * [Pedro Cavaco Henriques](https://wordpress.org/support/users/pchenriques/) * (@pchenriques) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/) * Hello, * I’m getting a text not vertically aligned in the encrypted e-mail address at the footer of the website: [https://monosnap.com/file/C1QwqJnQkDonEC9UNw9hAuWB5MAwiJ](https://monosnap.com/file/C1QwqJnQkDonEC9UNw9hAuWB5MAwiJ) * It’s an apparent conflict with Elementor plugin since it disappears if I disable it. * Is anyone else experience this issue? * Thanks * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftext-not-vertically-aligned%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 10 replies - 1 through 10 (of 10 total) * [Ironikus](https://wordpress.org/support/users/ironikus/) * (@ironikus) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13033308) * Hey [@pchenriques](https://wordpress.org/support/users/pchenriques/) – thank you for your message, as well as for mentioning the issue. I just checked on your site and the reason this happens is because we need to wrap the email within an element, which causes the intent due to the Elementor plugin. To get rid of it, you would need some CSS code that targets the very first span within the elementor-icon-list-item container. E.g.: `.elementor-icon-list-item > span{ display:flex }` Since this currently is global, you might need to adjust it to add an extra class for only targeting the footer list item. Hope this helps so far. 🙂 * Thread Starter [Pedro Cavaco Henriques](https://wordpress.org/support/users/pchenriques/) * (@pchenriques) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13036306) * Hey [@ironikus](https://wordpress.org/support/users/ironikus/) Thanks for the feedback. I think I understand the issue but I wasn’t able to implement it (I tried to test it with the developer tools of the browser with no success, not sure if it works this way…). But the issue results from something you have to fix on your side or is it a case only on our website? Meaning, we have to fix it by ourselves or we can wait by your fix… 🙂 Thanks * [Ironikus](https://wordpress.org/support/users/ironikus/) * (@ironikus) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13036553) * Hey [@pchenriques](https://wordpress.org/support/users/pchenriques/) – thank you for your answer. 🙂 There is nothing we could fix from our side since we simply use a span element without any extra styling to keep the standard. Since Elementor is loading its own code, you would require to simply add some custom CSS as mentioned in our last message. That’s the easiest and most convenient way to deal with it. 🙂 If you have further questions, feel free to let me know. * [WP-Henne](https://wordpress.org/support/users/wp-henne/) * (@wp-henne) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13038147) * Hello [@pchenriques](https://wordpress.org/support/users/pchenriques/), * I could find that it is a format error of the box for the envelope icon, check here: * > [View post on imgur.com](https://imgur.com/a/kwFa4Xd) * Why this box has a different size than the others is not quite clear, maybe you set something in the Elementor? * I also use Elementor and the encoder, but due to a design problem I had to do the exact reverse and set a protected space after the Awesome-Envelope, so that the spacing is correct, like with the Phone-sign! * Maybe we exchange ? I write to the mail of the website and you get this? * Greetings Henry * Thread Starter [Pedro Cavaco Henriques](https://wordpress.org/support/users/pchenriques/) * (@pchenriques) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13046157) * Hello [@wp-henne](https://wordpress.org/support/users/wp-henne/) * Sorry for the late reply. I would really appreciate if you could send your code fix :-). Yes, can send to the e-mail of the website. Thanks * What I have found out meanwhile: * 1. The “extra space” by the envelope only appears if I ad the mailto: to the email addresses, to make it clickable as explained [here](https://docs.elementor.com/article/426-how-to-make-clickable-phone-links-or-mailto-links-in-elementor-widgets) and have the Email Encoder plugin activated. If I remove the mailto: or deactivate the Email Encoder plugin there isn’t an issue. * 2. The “extra space” doesn’t appear while on [editing mode](https://monosnap.com/file/9SVHCtGFEZPCO1S1XgQ4Ryhm95Mks7) but than the Email Encoder didn’t still made its magic at this stage, correct? * So, the extra space comes from the addition of the mailto: code? Is it a theme or Elementor issue? But then again, it only happens if the Email Encoder plugin is activated. * [@ironikus](https://wordpress.org/support/users/ironikus/), what’s your insight? * Thanks for the help. * Greetings, * Pedro - This reply was modified 5 years, 11 months ago by [Pedro Cavaco Henriques](https://wordpress.org/support/users/pchenriques/). * [Ironikus](https://wordpress.org/support/users/ironikus/) * (@ironikus) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13046330) * Hey [@pchenriques](https://wordpress.org/support/users/pchenriques/) – the issue is caused because of the wrapping I explained in my first message. But the reason the issue is an issue in the first place is, because of the way Elementor set up their CSS classes. You should be able to get rid of the issue as well by simply changing our encoding method within the settings of the email encoder by setting the **Protect email using** settings item to **simple HTML character encoding.** * [WP-Henne](https://wordpress.org/support/users/wp-henne/) * (@wp-henne) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13049734) * Helo [@pchenriques](https://wordpress.org/support/users/pchenriques/), * i’ll write you, but here some more information even for others. * Thank you for providing more information, even [@ironikus](https://wordpress.org/support/users/ironikus/) for the CSS-Method from Elementor. * I’m using the plain-text field at Elementor and this is the code for mail and telephone: * ``` ``` * Look, after the envelope there is a space before the mail. But not at the phone line. * May while using the “special” element of Elementor causing the space? What typ of element you are using for the contact widget? I don’t know this from your screen shot. * Greetings, Henry * Thread Starter [Pedro Cavaco Henriques](https://wordpress.org/support/users/pchenriques/) * (@pchenriques) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13059391) * Hey, [@wp-henne](https://wordpress.org/support/users/wp-henne/) * I’m using the “[Icon List](https://monosnap.com/file/ndBVmu0vG0uN8PEhA6RwYsxlnCL1JQ)” element of Elementor free. * Thanks for the code. I see the approach of not using the builder but I don’t think it worth it. I will try to implement [@ironikus](https://wordpress.org/support/users/ironikus/)’ s custom CSS suggestion. * [@ironikus](https://wordpress.org/support/users/ironikus/), [@wp-henne](https://wordpress.org/support/users/wp-henne/), thanks all for the support. * Greetings, * Pedro * [Ironikus](https://wordpress.org/support/users/ironikus/) * (@ironikus) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13059715) * Hey [@pchenriques](https://wordpress.org/support/users/pchenriques/) – thank you for your feedback. If you have any further questions or you can’t make it work, feel free to reach out again, we’re happy to help. 🙂 * And thank you as well for your effort [@wp-henne](https://wordpress.org/support/users/wp-henne/)! * [WP-Henne](https://wordpress.org/support/users/wp-henne/) * (@wp-henne) * [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13062805) * Hello [@pchenriques](https://wordpress.org/support/users/pchenriques/), * thank you, now I’m knowing a new element in Elementor. * And I’ve tested and the same issue here. * There is a solution without CSS if you are using a shortcode like this: * `[eeb_protect_content protection_text="Javascript needed to see the mail address." method="rot13"]mailto:help@domain.tld[/eeb_protect_content]` * You need to paste this into the link-field instead of your `mailto:help@domain. tld` * This will output correctly without space. Greetings! * [@ironikus](https://wordpress.org/support/users/ironikus/): We all pull at the same end to make things better. Thank You! Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘text not vertically aligned’ is closed to new replies. * ![](https://ps.w.org/email-encoder-bundle/assets/icon-256x256.png?rev=2056506) * [Email Encoder - Protect Email Addresses and Phone Numbers](https://wordpress.org/plugins/email-encoder-bundle/) * [Frequently Asked Questions](https://wordpress.org/plugins/email-encoder-bundle/#faq) * [Support Threads](https://wordpress.org/support/plugin/email-encoder-bundle/) * [Active Topics](https://wordpress.org/support/plugin/email-encoder-bundle/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/email-encoder-bundle/unresolved/) * [Reviews](https://wordpress.org/support/plugin/email-encoder-bundle/reviews/) * 10 replies * 3 participants * Last reply from: [WP-Henne](https://wordpress.org/support/users/wp-henne/) * Last activity: [5 years, 11 months ago](https://wordpress.org/support/topic/text-not-vertically-aligned/#post-13062805) * Status: not resolved