Support » Plugin: Email Encoder - Protect Email Addresses » text not vertically aligned
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
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 to see the link]
-
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… π
ThanksHey @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:
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
HenryHello @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 6 months, 3 weeks 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:info@domain.tld">info@domain.tld</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,
HenryHey @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: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: We all pull at the same end to make things better. Thank You!
-
This reply was modified 6 months, 3 weeks ago by
- The topic ‘text not vertically aligned’ is closed to new replies.