New to the community? Start here

Can't click on a link on my phone

Hi,

I’ve created some images with text (which are links) on them as a sort of menu. The site is http://www.identitymatching.nl. It works fine on my desktop but on a tablet or phone it just won’t work. Could you please point out the problem? Many Thanks!

Julius

Sat, 7 Jan 2017 12:19:58
  • Dimitris Kalliris
    • Support Team Lead

    Hey there Julius Huitema,

    hope you’re doing good and thanks for reaching us! :slight_smile:

    It seems that your links are inside the overlay area which come up after you click on a box.

    This is happening with my Android phone too, clicking a box reveals the overlay text which is linked to another page.

    If you’d prefer a single-click experience then I’d rather propose to reconsider your design on those boxes.

    Let me know if I miss anything here!

    Warm regards,

    Dimitris

  • Julius Huitema
    • Unusual

    Hi Dimitris,

    Thank you for your response! I would really like to keep the animation but I also want it to work on mobile devices… I first used a 3rd-party plugin for the same boxes, but it wasn’t as responsive as i want (it gave me a lot of headaches). That plugin worked on mobile devices, so there should be a way to make my boxes work as well. I know only the basics of HTML and CSS, so it would be awesome if you could help me pin point what to do to make it work!

    Many Thanks!

    Julius

  • Pavle
    • New Recruit

    Hi Julius,

    try to add the following to the css:

    .hovereffect:focus .overlay {

    background-color: rgba(75, 75, 75, 0.8);

    }

    .hovereffect:focus h2 {

    -webkit-transform: translateY(5px);

    -ms-transform: translateY(5px);

    transform: translateY(5px);

    }

    .hovereffect:focus a.info {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    }

    Regards,

    Pavle

  • Julius Huitema
    • Unusual

    Hi Pavle,

    Unfortunately, nothing changed.. I left it in the CSS anyway, but here is the CSS as it was

    .hovereffect {

    width: 100%;

    height: 200px;

    float: left;

    overflow: hidden;

    position: relative;

    text-align: center;

    cursor: default;

    }

    .hovereffect .overlay {

    width: 100%;

    height: 200px;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0;

    background-color: rgba(75,75,75,0.3);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    }

    .hovereffect:hover .overlay {

    background-color: rgba(75, 75, 75, 0.8);

    }

    .hovereffect img {

    display: block;

    position: relative;

    }

    .hovereffect h2 {

    font-family: avenir;

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 17px;

    padding: 10px;

    background: rgba(0, 0, 0, 0.6);

    -webkit-transform: translateY(45px);

    -ms-transform: translateY(45px);

    transform: translateY(148px);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    }

    .hovereffect:hover h2 {

    -webkit-transform: translateY(5px);

    -ms-transform: translateY(5px);

    transform: translateY(5px);

    }

    .hovereffect a.info {

    display: inline-block;

    text-decoration: none;

    padding: 7px 14px;

    color: #fff;

    border: 0px solid #fff;

    background-color: transparent;

    opacity: 0;

    filter: alpha(opacity=0);

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    font-weight: normal;

    margin: -10px 0 0 0;

    padding: 22px 15px;

    }

    .hovereffect:hover a.info {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    }

    .hovereffect a.info:hover {

    box-shadow: 0 0 0px #fff;

    }

    .img-responsive {

    max-width: 100%;

    }

  • Pavle
    • New Recruit

    Well, I have checked z-index and there isnt anything problematic as far as I see, mostly I have deduced it to be something with touch devices, because it acts like it isnt aware that it has a hover effect. I have done live debugging on my iPhone via my MacBook, but didnt see anything that would solve it.

  • Adam Czajczyk
    • Support Gorilla

    Hello guys!

    I’m not quite sure if we are all on the same side here so I’d like to make sure about the primary goal :slight_smile:

    I see how this is working on desktop. That’s a well known effect when you hover over the image and the overlay (with some text) shows up and then after you click on it it takes you to another page. That’s fine.

    That can actually work in a similar way if you test the site with some mobile device emulator where you still move your cursor using a mouse/touchpad device.

    On a real mobile device where you are using your finger on a touchscreen there’s actually no “real on hover” effect so it’s either a “double-click” (1st one triggers overlay and 2nd one executes link) or a single one that only does one of this actions: either shows up overlay or executes link.

    A third scenario that I can imagine is that you actually “touch the image” once and then it first shows overlay for a short while and then redirects to a target link. That would however require some additional JavaScript to be executed.

    Am I missing anything here? I just want to better understand the goal an make sure that we are all troubleshooting that very same issue here so let me know Julius Huitema please :slight_smile:

    Best regards,

    Adam

  • Julius Huitema
    • Unusual

    Hi All,

    I think i’ve fixed it. The CSS looks like this now:

    .hovereffect {

    width: 100%;

    height: 200px;

    float: left;

    overflow: hidden;

    position: relative;

    text-align: center;

    cursor: default;

    }

    .hovereffect .overlay {

    width: 100%;

    height: 200px;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0;

    background-color: rgba(75,75,75,0.3);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    }

    .hovereffect:hover .overlay {

    background-color: rgba(75, 75, 75, 0.8);

    }

    .hovereffect:focus .overlay {

    background-color: rgba(75, 75, 75, 0.8);

    }

    .hovereffect:focus h2 {

    -webkit-transform: translateY(5px);

    -ms-transform: translateY(5px);

    transform: translateY(5px);

    }

    .hovereffect:focus a.info {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    }

    .hovereffect img {

    display: block;

    position: relative;

    }

    .hovereffect h2 {

    font-family: avenir;

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 17px;

    padding: 10px;

    background: rgba(0, 0, 0, 0.6);

    -webkit-transform: translateY(45px);

    -ms-transform: translateY(45px);

    transform: translateY(148px);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    }

    .hovereffect:hover h2 {

    -webkit-transform: translateY(5px);

    -ms-transform: translateY(5px);

    transform: translateY(5px);

    }

    .hovereffect a.info {

    display: inline-block;

    text-decoration: none;

    padding: 7px 14px;

    color: #fff;

    border: 0px solid #fff;

    background-color: transparent;

    opacity: 0;

    filter: alpha(opacity=0);

    -webkit-transform: scale(0);

    -ms-transform: scale(0);

    transform: scale(0);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    font-weight: normal;

    margin: -10px 0 0 0;

    padding: 22px 15px;

    }

    .hovereffect:hover a.info {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    }

    .hovereffect a.info:hover {

    box-shadow: 0 0 0px #fff;

    }

    .img-responsive {

    max-width: 100%;

    }

    .hovereffect {

    width: 100%;

    height: 200px;

    float: left;

    overflow: hidden;

    position: relative;

    text-align: center;

    cursor: default;

    }

    .hovereffect .overlay {

    width: 100%;

    height: 200px;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0;

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    }

    .hovereffect:hover .overlay {

    background-color: rgba(170,170,170,0.4);

    }

    .hovereffect h2, .hovereffect img {

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    }

    .hovereffect img {

    display: block;

    position: relative;

    -webkit-transform: scale(1.1);

    -ms-transform: scale(1.1);

    transform: scale(1.1);

    }

    .hovereffect:hover img {

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    }

    .hovereffect h2 {

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 17px;

    padding: 10px;

    background: rgba(0, 0, 0, 0.6);

    }

    .hovereffect a.info {

    display: inline-block;

    text-decoration: none;

    color: #fff;

    border: 0px solid #fff;

    background-color: transparent;

    opacity: 0;

    filter: alpha(opacity=0);

    -webkit-transform: scale(1.5);

    -ms-transform: scale(1.5);

    transform: scale(1.5);

    -webkit-transition: all 0.4s ease-in-out;

    transition: all 0.4s ease-in-out;

    font-weight: normal;

    position: absolute;

    top: 0%;

    left: 0%;

    padding: 100px 30px 70px 30px;

    }

    .hovereffect:hover a.info {

    opacity: 1;

    filter: alpha(opacity=100);

    -webkit-transform: scale(1);

    -ms-transform: scale(1);

    transform: scale(1);

    background-color: rgba(0,0,0,0.4);

    }

  • Julius Huitema
    • Unusual

    I makes the slider with the text come over the slider with the title so now the link is already in front of everything which makes usable on touch devices. The only thing is that you cannot see what’s on the top slider because you get redirected to the next page, but I can live with that.