Hi,
I have some small link blocks with social media images inside of them (40 x 40px wide) that work perfectly on desktop and ipad. I have also added a simple hover interaction to them as well.
However, when the site shrinks down to mobile (landscape and portrait) they simply don’t work. No interaction at all.
Has anyone else come across this problem?
Hi, can you share your public project link ? Then we can take a look here on the forum, what might be the issue on the page, or in some cases, limitation… or if you do not want to share publicly, you can also contact our support@webflow.com email address for assistance with this particular issue.
Sure thing Dave,
https://webflow.com/design/atlanteanportal?preview=f4e859cd655c7f99b17dcd751918fa35
Thanks for any help.
The problem is the social links when viewing on mobile, they just don’t work.
Hi, ok, it is because you have two sections defined and one section is sitting on top of the social media buttons, so they never get the hover event triggered. What you need to do, is give each section a class name, some relative positioning and a z-index for each of the two sections, for example, the section that contains your nav links:
I named that “navbar section” this is the section that was overlaying your links, so I want to give this section relative positioning and a z-index 90:
Then I want to select the section that contains the Social Media Links give it a class name, i called it “social media links” in the example, and give that also relative positioning, and a z-index of 100.
Once you update that, then save your changes and publish and check out if the buttons hover and are linked ok. try checking that, and let us know.
Cheers
Dave,
That is perfect! Thank you so much.
Thanks for the excellent instructions, the images make it so clear. You have excelled yourselves as usual.
Regards,
