Sticky banner to run alongside blog content

Question

I'm trying to add a banner ad to run along the left side of my blog post.

However my attempts so far have resulted in it appearing above the content pushing the blog post content down the page.

Live link: https://www.moneynest.co.uk/pension-crisis-uk/

Added into head:

<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>

Added into CSS

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

left: 0px;

position: fixed;

text-align: center;

top: 200px;

}

}

FYI I followed this guide .

Answer 1

1. First of all, replace the position of ... move it inside your main content wrapper.
2. Then apply this css,

As you want to show this only on wider screen then use this,

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

This will hide the banner on the screen smaller than 1400 pixels.

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

Answer 2

First, be careful with the div id quotes.

<div id=”LeftFloatAds”> should be <div id="LeftFloatAds">

Then, with that media query you are giving those properties to the element only when the screen is at least 1400px but less than 500px, which is impossible. Try it like this:

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