通过代码禁用“关注”按钮后，Tumblr 白色条出现在我的移动主题顶部

Question

因此，从

4/12/15

开始，Tumblr 更改了代码中的某些内容，并且

"Promote Tumblr!"

按钮重新出现在我的博客上，即使我在高级设置中禁用了它们......

我搜索并找到了这段代码：

iframe:first-child { display: none !important; }

这对我有用，但现在在网站的移动版本上，我在顶部看到一个纯白色的条，就在 Tumblr 推广按钮曾经所在的位置...在桌面上，一切正常...

我在这里附上了之前和之后的屏幕截图：

之前： ,

之后：

有什么想法可以摆脱它吗？

提前谢谢您！

Answer 1

那是因为 Tumblr 似乎在 body 和这种样式中添加了“tmblr-iframe--controls-phone-container”这个类；

.tmblr-iframe--controls-phone-container {
    padding-top: 43px;
}

据我发现。 尝试：

body { padding-top: 0 !important; }

您可以使用 Chrome（桌面浏览器）中的“开发者工具”在不同的移动设备上查看您网站的源

HTML

，这应该可以帮助您解决此类问题。

注意：我使用 Chrome 浏览器中的“开发者工具”并模拟名为“iPhone 5”的设备来重现相关问题。

Answer 2

感谢 Chatgpt，这是 2024 年可在桌面和移动设备上运行的版本：

    /* Hide Tumblr promote buttons on desktop */
tumblr_controls, .tmblr-iframe {
    visibility: hidden;
    padding-top: 0 !important;
    /* Hide the tumblr-iframe objects */
}

tumblr_controls, .iframe-controls--desktop {
    visibility: hidden;
}

/* Hide Tumblr promote buttons on mobile */
body > iframe.tmblr-iframe--controls-phone-container,
.iframe-controls-center {
    display: none !important;
}

/* Remove white bar on mobile */
body {
    padding-top: 0 !important;
}