在手机上点击社交图标没有任何反应

Question

我在我的网站上创建了一些社交媒体图标。我的链接在桌面上工作正常，但在移动浏览器中点击它们没有任何反应。这是网站 https://theopenbay.weebly.com，这是代码 —

<!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>

Answer 1

欢迎来到 SO。我发现了问题。这些图标被“navmobile”元素屏蔽了。它覆盖了图标，所以无法“按下”图标。

这是由该元素的显示块样式引起的。因此，通过删除它，您将能够使这些图标再次可点击。

Answer 2

你的问题是，div#navmobile 与你的页脚重叠，#navmobile 的 z-index:8，你可以做的是，你可以改变 div#my-footer's position to relative 和 z-index 大于 8，这里是代码（你应该添加到 css）：

#my-footer{position:relative; z-index:99}

Answer 3

我通过将 display: block 更改为 display: table 来解决这个问题，这降低了 navmobile 的高度。

上下文：以上 Iliass Nassibane 发布的图片。

在手机上点击社交图标没有任何反应

Nothing happens on clicking social icons on mobile

html

css

responsive-design

mobile-website

weebly