Alignment Issue – Obfuscate Shortcode uses justify-content: flex-end

@qriouslad thank you so much for your response and for maintaining the ASE plugin. It’s truly appreciated.

I’ll try to use the !important override as you suggested for my specific scenario, even though I have no idea how to implement it. I think inline styles are difficult to override with CSS alone. Out of curiosity, I do wonder if more users might eventually face this alignment issue and report it, which could help determine if changing flex-end to center causes any major problems. Sometimes, things can go unnoticed even with a large user base, so it would be interesting to see if this comes up for others, too.

Also, I’m just curious (and please excuse my limited development knowledge), was there a particular reason for using flex-end the default alignment? I wish to understand the process behind it, purely out of interest.

Thanks again for your time and for all the hard work you put into the plugin!

To help illustrate the alignment issue, I’m including an image that shows exactly what I’m experiencing:

1. The image displays four info cards, each with a heading, description, and email address.
2. The top half of the image uses justify-content: flex-end; which causes email addresses like [email protected], [email protected], and [email protected] to break out to the right, making the layout look uneven.
3. The bottom half uses justify-content: center; which centres the email addresses and results in a more balanced appearance (comparatively!).

I believe that, at the very least, centring the content would be preferable to aligning it to the end.

Image link – https://freeimage.host/i/FErvlEb

@qriouslad I have to admit, I’m not entirely sure how to implement the fix myself. I’ve tried wrapping the obfuscated email address in another container and styling it, as well as experimenting with custom CSS, although I’m not entirely confident about it. I checked the forum to see if anyone else had reported a similar issue, but didn’t find anything.

I only noticed the problem when testing the site’s responsiveness at a 1024px desktop width. At first, I thought it might not be a big deal, but I figured it was worth mentioning here in case others run into it as well.

Unfortunately, the site isn’t live yet, I have mentioned this earlier, so I can’t share a URL. However, I’ve shared a screenshot of the HTML structure from the inspector tool. Hopefully, this gives you enough context to suggest a CSS fix. Thank you so much for your help, I appreciate it!

Image link – https://freeimage.host/i/FGBx7VV

@qriouslad I completely agree with your points. My intention was just to report what I noticed, not to suggest it’s a high-priority issue. I understand it’s difficult to troubleshoot without a live link, especially with Elementor in the mix, and I appreciate your patience. For now, I haven’t made any major CSS or Elementor changes that would complicate things, but I’ll definitely share the live URL here once the site is ready (though it may take a while). Thanks again for your support and for maintaining ASE!