Code to move over banner ad in header

@karenstl

Did you put
.ads-header-desktop {
display: block;
float: right;
margin-right: 5px;
margin-top: -95px;
}
on Custom.css as aeroomkar suggested?

Just for you to see how it works, I placed the code on Custom.css with this changes:

.ads-header-desktop {
display: block;
float: right;
margin-right: 20px;
margin-top: -115px;
}

By the way: doing that the template could loose it’s responsiveness on smartphones.

Check it out on my page: https://www.revistaecologica.com

Bosco –

I hadn’t seen that code. Thanks, I added your version (second code above) to the CSS and it worked great on the desktop version.

I used the code the theme designer recommended in another thread so it wouldn’t show on mobile, but it is showing on my iPhone so this code needs to be tweaked.

.ads-header-desktop { display: block; }

@media only screen and (max-width: 800px) {
.ads-header-desktop { display: none; }
}

Any suggestions on how to change this code so the header banner ad only shows on the desktop version?

Thanks again. The banner is showing perfectly with Bosco’s code on the desktop. Still need to get it to now show on the cell phone…

https://futureexpat.com

This is untested. Try changing screen to handheld and removing the max-width if you only want to keep it off of mobile devices so it looks like:

@media only handheld {
.ads-header-desktop { display: none; }
}

Good try…but didn’t work. Still showing up on my iPhone.

Are you using the phone in landscape or portrait when the ads show up?

The code that you use here:

@media only screen and (max-width: 800px) {
.ads-header-desktop { display: none; }
}

Means that IF the screen is any smaller than 800px width, it will hide it. So you can just adjust the 800px value as you wish. I’m not sure what iPhone you have, but look up the screen resolution for that model to see when to hide it.

I’ve got an iPhone 5 and the banner ad shows up even in portrait mode. I’ve added your code above to my css and it isn’t hiding the ad on the phone.

I’ve decided to move the banner ad to between the top bar and the logo. I managed to do this by moving the code up in the header.php file but can’t seem to get the banner ad to center.

https://futureexpat.com/

In my css file, I added the code:
.ads-header-desktop {
display: block;
float: none;
margin-top: 15px;
}

1) I just want it centered and a small gap between the top bar and the ad. What am I doing wrong with this code?

2) Since I can’t seem to make the banner ad disappear on the phone, is it possible to make it responsive so it shrinks down to fit the screen width? If I can do this, I would actually prefer it.

Karen,

To center it, add: <center> YOUR CODE </center>

You can even use the responsive ad code from Adsense, with better optical results than the actual size.

That’s all.

Have fun!

<center> has been deprecated as of html5. It is not suggested to use that. Instead, open your header.php file and wrap your code a in div with a class of your choice, like “bannerDiv”. Here is an example:

<div class="bannerDiv">
  [YOUR CODE HERE]
</div>

Then to center add this in your css file:

.bannerDiv {
width: 728px;
margin: 2% auto;
}

As far as making it responsive, you will have to look at the code that you are using to add the banner. When the element is placed an inline style element is added (728px). If you can change this, then you can make it responsive. Let us know if you can and I will try to walk you through the changes to your css.

That worked!

Thanks DMBarber.

Alex had already had me add the class as “.ads-header-desktop” to the header file and some CSS for this class, so I just added the width and margin to it.

For anyone else wanting to do this, the css is:

.ads-header-desktop {
display: block;
float: none;
margin-top: 15px;
width: 728px;
margin: 2% auto;
}

And the code below added to the header.php file just above <div class=”container group”> towards the top of the file.

<div class=”ads-header-desktop”><Your Adsense code here></div>

Now to see if I can get the code to be responsive from Adsense since I can’t get it to not show on my phone.

@dmbarber,

Thanks for the hint about <center> no being supported on HTML5.
But worked fine for my needs.

Tomorrow I’ll try your tip.

@dmbarber,

Please help me out: why <center>XYZ CODE</center> works on WordPress?

You can verify it on my sites footer: https://www.revistaecologica.com/ and https://www.qiempresarial.com/

Its not that <center> does not work, it is that it is being retired.

It is still a valid tag in HTML4 but may or may not work HTML5. So rather than continuing to use code that is being deprecated, or retired, it is better to start switching to newer standards. That is all.

I hope my explanation helps.

@dmbarber,

I placed in Style.css

.ads-footer-desktop {
display: block;
float: none;
margin-bottom: 15px;
width: 1380px;
margin: 2% auto;
}

And the code between ‘</div><!–/.container–>’ and ‘<footer id=”footer”>’,

but the ad goes to the left.

How can I center it?

With the responsive code, from Adsense, the result was similar. Just the ad’s area was bigger.

Thank you very much!

Dear friends,

The solution is: <div style=”text-align: center;”> before the Adsense code.

That’s all!