'ID' link not working on mobile device

[Pfitz1967]

Hi,
I have a Contact-Me button at the top of my one-page website, pointing to a Contact section at the bottom of the page, using the HREF to the ID.

It works correctly on my desktop and tablet devices, but when I click on on the button (pointing to #contact) on my android phone, nothing happens. (It’s the same on an iPhone.)

I can see that the url in the browser on these mobile devices is www.patfitzpatrick.ie/#contact, but the ID anchor doesn’t seem to work, and pushing the button means nothing happens.

One thing to note is I built this site based on the Renew-5 demo. I couldn’t get the 600x700 images to display properly on mobile view, so I added them manually when in that view.

I updated X and Cornerstone to the latest version today.

Any ideas?

thanks
Pat

[jade]

Hi Pat,

This is because you have two elements on the page with the same ID. As a rule, an ID should be unique for the entire page.

Please try to do the following:

#1 Remove the ID Contact to the column that displays on mobile then change the ID of it’s row to contact-mobile:

#2 Edit the row ID of the contact row that displays on desktop then set it to contact-desktop

#3 Duplicate the Contact Me button then change the URL link of the first button to #contact-desktop then the second button to #contact-mobile. If you’re able to follow the previous steps correctly, when you click on one button, it should link to the desktop contact and the other to the mobile.

#4 Now, in order to only display one button depending if it’s on a desktop or mobile view, edit the button setting of the button that links to the desktop contact section then add the classes cs-hide-sm cs-hide-xs to that button’s class field. Then for the button that links to the mobile contact section, set the classes cs-hide-xl cs-hide-lg cs-hide-md to it.

Hope this helps.

[Pfitz1967]

@Jade

cs-hide-xl cs-hide-lg cs-hide-md

Superb, worked perfectly. Thanks!

[basanta]

You are most welcome!