8 replies · opened Apr 13, 2020
Is it possible to have the team-social-icons show AFTER a user taps the team image on mobile/touch devices? So it takes one tap to show the icons, then another tap on the icon to go to the webpage/social profile.
As it is now, if a user touches the team image on mobile, they can mistakenly click one of the icons and they are taken to the webpage without knowing which one they touched.
Hello,
Can you please let us know the name of the Template where you are facing this issue so that we can check and provide you with more assistance on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Canvas HTML One Page
Hello,
Thanks for the Live URL. We have just checked this out and upon testing this on a Mobile Device, we are not experiencing any issue with the Hover Functionality or direct clicking of the icons. On the First Touch, the Overlay is being displayed with the Icons and then upon clicking the Icon, the page gets navigated to the Social Page. This is the Default Behavior that is expected. Can you please provide us with the name of the Device/Browser you are using or a Screencast of the Issue so that we can check this further. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
If you tap anywhere on the logo (team image) but outside of the icons, then the overlay appears and you can tap on the icons. But if you tap the logo exactly where an icon is, then the overlay appears and you're immediately linked to whatever icon you tapped on.
Here is an example of tapping a logo ONE TIME and it goes straight to the Facebook link.
https://www.dropbox.com/s/9cnks26xg88iaie/VID_20200415_133309.mp4?dl=0
Here's another example of tapping the same logo once and it taking you straight to the Instagram link.
https://www.dropbox.com/s/ymj71ss5q8rb7ny/VID_20200415_133358.mp4?dl=0
This happens on both Android/Chrome and iOS/Safari.
The overlay isn't already visible. The icons are active without being visible. Tapping it shows the overlay and makes the icons clickable at the same time. This is not the expected behavior. This also happens with your one page example on Themeforest.
Please help me fix this.
Hello,
Thanks for more information and providing us with screencasts.
The issue is certainly not with the codes but with not using Javascripts which emulates the default behavior of Click/Hover to Touch. We are using CSS to display the Overlay which makes the Performance much better in comparison with Javascripts. However, since was an issue for you, we have tested some codes and the following CSS Code works fine:
.device-touch .team-overlay .social-icon {
display: none !important;
}
.device-touch .team-overlay {
display: none;
}
.device-touch .team:hover .team-overlay {
display: block;
opacity: 1;
}
.device-touch .team-overlay:hover .social-icon {
display: inline-block !important;
}
.device-touch .team-overlay .team-social-icons {
pointer-events: none;
}
.device-touch .team-overlay:hover .team-social-icons {
pointer-events: auto;
}
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
This works perfectly. Thank you!
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard