Anchor links not working correctly on apple's safari and googles chrome in mobile

Hi my site is almost ready to launch but the anchor links don’t seem to work on mobile.

I have anchor links in my menu that don’t work to the correct location.
and the anchors on the page don’t seem to work at all in mobile safari,

The links work as links in chrome on mobile but all of them direct you to the top of the page not to where its supposed to link on the page

after searching for a fix I contacted my domian provider and they directed me back to the theme developer saying a plugin may be causing this… but I’m not sure which plugin.

the website is www.cntrlplace.com

Hi @jeffgollin,

Thanks for reaching out.
I have checked your website and found most of the links are working except the Contact one. And that is because the ID of the section is set in the uppercase i.e. CONTACT. If that is the problem you are trying to point out, please change it to the proper case and check.

If that is not what you are trying to describe, please provide any screenshot marked with the issue or any video that helps us to recognize the problem.

Thanks

Thank you for pointing it out but the issue is anchor links are not working on mobile.
Desktop is fine.

The hosting tech said the issue was with a plugin?

Hello @jeffgollin,

The issue is not caused by a plugin or anything. It is how you have created the page. Let’s take a look at this section structure of your page:

Your djing section is only visible on desktop screens. On mobile, no matter how many clicks you make, it will not go to the djing section because it is already hidden away.

If you take a close look, you have TURNTABLISM and turntablism IDs. Keep in mind that an element ID must be unique. There should not be any other duplicates (not case sensitive) because it can cause issues, especially on smaller screens or touch devices.

We highly recommend that you restructure your sections into the following format:

Be advised that if you are using rows and columns, you can always use the responsive layout settings to have two or three columns on desktop screens and make it collapse to one column on smaller screens.

By clicking the “Template” option, you can set the responsive layout settings. For more details, about the responsive element settings, kindly check this out:

Hope this makes sense.

Thank you, I had forgotten how I had built the page.

You are most welcome, @jeffgollin.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.