text not vertically aligned

Hey @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 <span> 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. ??

Hey @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

Hey @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.

Hello @pchenriques,

I could find that it is a format error of the box for the envelope icon, check here:

View post on imgur.com

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

Hello @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 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 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, what’s your insight?

Thanks for the help.

Greetings,

Pedro

• This reply was modified 4 years, 5 months ago by Pedro Cavaco Henriques.

Hey @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.

Helo @pchenriques,

i’ll write you, but here some more information even for others.

Thank you for providing more information, even @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:

<ul>
 	<li><i class="fas fa-envelope"></i>?<a href="mailto:[email protected]">[email protected]</a></li>
 	<li><i class="fas fa-phone"></i>[eeb_protect_content protection_text="Javascript needed to see the phone number" method="rot13"]<a class="mailto-link" href="tel:1234567890" target="_blank" rel="noopener noreferrer">1234567890</a>[/eeb_protect_content]</li>
</ul>

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

Hey, @wp-henne

I’m using the “Icon List” 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’s custom CSS suggestion.

@ironikus, @wp-henne, thanks all for the support.

Greetings,

Pedro

Hey @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 !

Hello @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:[email protected][/eeb_protect_content]

You need to paste this into the link-field instead of your mailto:[email protected]

This will output correctly without space.
Greetings!

@ironikus: We all pull at the same end to make things better. Thank You!