按钮不会出现在手机上

Question

查看this sample site.

在下一个按钮下应该有3个按钮（添加，了解更多信息和报告）。在IE和Firefox中，无论浏览器有多小，它们看起来都很棒。但当我看到我的三星Galaxy 3时，那3个按钮没有出现。知道为什么吗？

这是HTML：

<div ID="add_learn_wrapper"><div ID="add_learn_container"><div ID="add_learn_stretch"><div ID="add_learn">
<div class="add_learn_buttons">
<a href=#><img src="images/add-button-up.png" class="button"></a></div>
<div class="add_learn_buttons"><a href=#><img src="images/learn_more_button.png" class="button"></a></div>
<div class="add_learn_buttons"><a href=#><img src="images/report-button.png" class="button"></a>
</div></div></div></div></div>

这是CSS：

.button, .back_button {
    -webkit-transition: all 0.0s;
    transition: all 0.0s;
}

.button:active, .button:hover, .back_button:hover, .back_button:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
}

#add_learn_wrapper {
    width: 75%;
    margin-top: 5px;
    height: auto;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 499px) {
#add_learn_wrapper {
    width: 95%;
}   
}
#add_learn_container {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
    max-width: 480px;
    min-width: 320px;
    height: auto;
    overflow: hidden;
}
@media screen and (max-width: 499px) {
#add_learn_container {
    width: 100%;
    max-width: 300px;
    min-width: 10px;
}   
}
#add_learn_stretch {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 0px;
    padding-bottom: 54%;
    position: relative;
}
#add_learn {
    display: block;
    Position: absolute;
    width: 100%;
    height: 100%;
    text-align: left;
}

.add_learn_buttons {

    height: 32%;
    width: 100%;

}
.add_learn_buttons img {
    height: 100%;
    width: auto;
}