Question

我的以下应用有一个获奖者名单。这一切都在桌面上运行良好，但只要我调整到移动尺寸，获胜者就不再可以点击了。

https://religious-freedom.herokuapp.com/

我认为css的某些部分效果不佳。我是我的第一个大应用程序，因此所有代码都有点混乱。

有人可以让我了解导致它的原因吗？感谢

Answer 1

您的链接元素正在被其他div元素覆盖。我将clearfix类添加到以下div中，并且＃34; unovered＆＃34;你的链接。

<div class="silver col-lg-4 col-md-4 clearfix"...

有关clearfix类的更多信息，请参阅http://getbootstrap.com/css/#helper-classes-clearfix。通常添加

使用浏览器devtools检查您的页面非常有用。当您将鼠标悬停在devtools窗口窗格中的元素上时，它将显示div的位置以及它们是否可能无意中与其他内容重叠。

Answer 2

我知道为什么现在。检查你的HTML，链接没有正确包含在你的图片中。如果移动指针，则只有在单击锚标记而不是图像时才会起作用。因此，请更改您的代码，确保它适用于img click。

<a href="http://religiousfreedomandbusiness.org/global-awards/don-larson.html" target="_top">
                    <img src="http://s3.amazonaws.com/assets.my-bucket/candidates/avatars/000/000/006/medium/Don-Larson.jpg?1470198723">
                    <img src="../images/silver.png" class="medalsilver">
</a>

链接不适用于移动模式

2 个答案: