Links not working on mobile devices (Wordpress)

Question

stack community,

I couldn't find a solution to this issue yet and I hope someone can help me.

I have a WordPress-Website which is using a theme, so far everything works seamlessly. However, the "footer" of this website is not a Widget, I added the content on every page manually. I know it is a pain to adjust stuff, but for this project, it was a fast solution.

My issue is the following:

I am using social media icons as buttons and they are linked. The links work fine on a desktop (using Chrome and Safari) and on Google's "Developer Tools" window with the different selection of screen sizes. For example, if I select "iPhone" the links work. But as soon as I open the site on my actual phone, I cannot click on them, they aren't working.

Why is this and how can I fix it?

Here are some screenshots:

Here is the html code shown for the facebook icon in Google Dev Tools with CodePen:

<div class="wpb_wrapper"><div class="btn-align-center">
<a href="https://www.facebook.com/iamviola.de/" class="default-btn-shortcode dt-btn dt-btn-l fadeIn animate-element animation-builder full-width-btn  vc_custom_1523221889433 animation-triggered start-animation" target="_blank" id="default-btn-7"><span>
<svg class="svg-inline--fa fa-facebook-f fa-w-9 fa-2x" aria-hidden="true" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 264 512" data-fa-i2svg=""><path fill="currentColor" d="M76.7 512V283H0v-91h76.7v-71.7C76.7 42.4 124.3 0 193.8 0c33.3 0 61.9 2.5 70.2 3.6V85h-48.2c-37.8 0-45.1 18-45.1 44.3V192H256l-11.7 91h-73.6v229"></path></svg>
<!-- <i class="fab fa-facebook-f fa-2x"></i> -->
</span></a>
</div></div>

Codepen HTML for facebook icon

The thing is, I can click on every other link on my website apart from these icons. I never had this issue before.

Thank you for your help!

Answer 1

The first things I would check on mobile are the target areas for your icon links, and if there might be another (invisible) element that is on top of these links.

For the first question, temporarily edit your css and add a background color to the anchor tags of your social media links, and check if these target areas are where you expect them to be.

For the second question, using inspector, examine elements close to the social media links, looking for something that might be on top of your links.

If you don't have any joy, you could share a link to your site so others can help.

Good luck!