Sticky banner to run alongside blog content
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.
html css wordpress
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
add a comment |
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.
html css wordpress
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
add a comment |
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.
html css wordpress
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
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.
html css wordpress
html css wordpress
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
asked Jan 3 at 19:42
Sam JefferiesSam Jefferies
198115
198115
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
- First of all, replace the position of ... move it inside your main content wrapper.
- 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;
}
}
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
add a comment |
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)
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54028789%2fsticky-banner-to-run-alongside-blog-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
- First of all, replace the position of ... move it inside your main content wrapper.
- 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;
}
}
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
add a comment |
- First of all, replace the position of ... move it inside your main content wrapper.
- 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;
}
}
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
add a comment |
- First of all, replace the position of ... move it inside your main content wrapper.
- 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;
}
}
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
- First of all, replace the position of ... move it inside your main content wrapper.
- 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;
}
}
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
answered Jan 3 at 20:03
Deepak SinghDeepak Singh
408
408
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
add a comment |
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Thanks Deepak, I made this a lot more complicated than I needed to. I simply inserted the image into my blog post content (which put it inside my main content wrapper) and then used a fixed positioning to move it to the left.
– Sam Jefferies
Jan 7 at 12:50
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
Yes, you were wrapping it outside your main wrapper. The best place will be right after your body opening tag or your main container class.
– Deepak Singh
Jan 8 at 22:30
add a comment |
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)
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
add a comment |
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)
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
add a comment |
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)
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
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)
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
answered Jan 3 at 19:58
Giselle CraigGiselle Craig
11
11
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
add a comment |
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
Yes, if you don't use regular single or double quotes (" or ') then the quotes will become part of the name of the div, so when selecting the div with css it will look like this: #”LeftFloatAds” (which is not recommendable)
– Giselle Craig
Jan 3 at 20:15
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54028789%2fsticky-banner-to-run-alongside-blog-content%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
