CSS响应形状问题

Question

我在我的网站上添加了一个固定的热门搜索和社交栏，所有内容在桌面上都很棒。它应该是响应性的，但是，我在移动观看（平板电脑/手机等）方面遇到了问题，因为它已经失去了它的形状。

酒吧本身效果很好，搜索部分也是如此。这是导致移动观看时形状失败的社交css部分。

这里应该是什么样子：

以下是它在移动设备上的外观：

以下是编码：

.topbar .social {
    float: right;
    display: inline-block;
    margin-left: 15px;
    margin-top: -30px;
    margin-bottom: -60px;
}
.topbar .social a {
    display: inline-block;
    width: 34px;
    height: 60px;
    padding-top: 8px;
    position: relative;
    background-color: #f293b5;
    float: left;
    color: #fff;
    font-size: 18px;
    text-align: center;
    margin-left: 5px;
}
.topbar .social a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0; 
    border: solid transparent;
    width: 0;
    height: 0;
    pointer-events: none;
    border-bottom: 13px solid #fff;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
}

可以在此处找到所有代码和HTML：http://jsfiddle.net/20tL16v3/ （忽略其他Wordpress附加内容，例如显示小部件附加功能。）

这让我抓狂！任何人都可以帮我纠正这个问题，还是指出我可能出错的方向？提前谢谢。

Answer 1

尝试使用：

.topbar .social { float: right; overflow:hidden; display: inline-block; margin-left: 15px; margin-top: -30px; margin-bottom: -60px; }

还要确保您正在使用视口元标记 - 您可以通过快速搜索找到更多信息。

我希望这有帮助， - 让我知道。 欢呼声。

Answer 2

您有一个媒体查询，可以将标题的溢出设置为隐藏。

@media only screen and (max-width: 1139px) {
  .site-inner, .wrap {
    max-width: 960px;
    overflow: hidden;
    }
}

将其设置为overflow: visible;，你应该看到你的丝带就像你缩小窗户时的那样。

如果您无法找到该媒体查询，只需在您绝望的情况下将其设置在您的CSS中：.site-inner, .wrap { overflow: visible !important; }