Telegram API Question posted in
A comprehensive official documentation can be found here.

Nothing happens on clicking social icons on mobile – Telegram API

I created some social media icons on my website. My links are working fine on the desktop but nothing happens on tapping them in a mobile browser. Here is the website https://theopenbay.weebly.com and here is the code —

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.fa {
  padding: 10px;
  font-size: 30px;
  width: 30px;
  text-align: center;
  text-decoration: none!important;
  margin: 5px 2px;
  border-radius:50%;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-telegram {
  background: #30a2e7;
  color: white;
}

.fa:hover {
    opacity: 0.7;
}

</style>
</head>
<body>

<!-- Add font awesome icons -->
<a href="https://www.facebook.com/TheOpenBay" target="_blank" class="fa fa-facebook"></a>
<a href="https://t.me/TheOpenBay" target="_blank" class="fa fa-telegram"></a>
</body>
</html>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it by changing display: block to display: table which reduced the navmobile height.

    Context: the images posted by Iliass Nassibane above.


  2. 0

    and welcome to SO. I found the issue. The icons were blocked by the "navmobile" element. It covered the icons, so it wasn’t possible to "press" the icons.

    enter image description here

    This was caused by the display block styling of that element. So by removing that you’ll be able to make those icons clickable again.

    enter image description here

    Login or Signup to reply.
  3. 0

    your problem is, that div#navmobile is overlaping your footer, #navmobile has z-index:8, what you can do, is that you can change div#my-footer’s position to relative and z-index higher than 8, here is the code (you should add to css):

    #my-footer{position:relative; z-index:99}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search