html - 与博客内容一起运行的粘性横幅

Question

我正在尝试添加横幅广告以在我的博文左侧转换。

然而，到目前为止，我的尝试导致它出现在将博客文章内容推到页面下方的内容之上。

实时链接:https://www.moneynest.co.uk/pension-crisis-uk/

添加到头部:

<div id=”LeftFloatAds”><a href="https://www.pensionbee.com" target="_blank"><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></a></div>

添加到 CSS 中

@media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{

left: 0px;

position: fixed;

text-align: center;

top: 200px;

}

}

仅供引用，我关注了 this guide .

Answer 1

1. 首先，替换...的位置，将其移动到您的主要内容包装器中。
2. 然后应用这个 css，

因为你只想在更宽的屏幕上显示它然后使用它，

@media only screen and (min-width: 1400px) {
    #LeftFloatAds {
        position: fixed;
        display: block;
        overflow: hidden;
        left: 0;
        top: 200px;
    }
}

这将在小于 1400 像素的屏幕上隐藏横幅。

@media only screen and (max-width: 1399px) {
    #LeftFloatAds {
        display: none;
    }
}