[Resolved] Reserve space for ads in header or Post

[vaibhav]

I want reserve space for ads in header & side bar but i dont know how to do it…

If we create placeholder or container for ads already then it will not create layout shift..

Can you help me in that?

[David]

Hi there,

you would need to add a HTML wrapper around your script eg.

<div class="header-advert-wrap">
// Your Ad script goes here
</div>

Then you can sue some CSS to set a minimum height:

/* Set min height of ad container */
.header-advert-wrap {
    min-height: 300px;
}
/* Optional - adjust height on mobile */
@media(max-width: 768px) {
    .header-advert-wrap {
        min-height: 200px;
    }  
}

[vaibhav]

.header-advert-wrap {
    min-height: 300px;

This code is started from .header or above line

/* Set min height of ad container */
.header-advert-wrap {
min-height: 300px;

[vaibhav]

Main Adsense code was already added in header. So i need wrap that Same code with given code.

[David]

Yes, you need to simply add the <div class="header-advert-wrap"> before your script and the </div> after it.
And the CSS goes in your Customizer > Additional CSS or in your child themes styles.css

[vaibhav]

But Im getting error of NO slot size mention. You can check on by inspecting it

[vaibhav]

Only it shows white blank space.

[David]

Try this CSS instead:

.header-advert-wrap {
    min-height: 300px;
    display: inline-block;
    width: 100%;
}

.header-widget {
    width: 100%;
    min-height: 300px;
}

[vaibhav]

Actually Code that given at starting is working now because I directly added that First code to insert header & footer plugin instead of custom html widget in header.
But ad is showing above my site title and i want that just below the title or at right side. how i can do it?

[Elvin]

Hi there,

Can you link us to a sample page where this is occurring? So we can inspect the page and see if things are properly applied.

You can use the private information text field to provide the link. 😀

[vaibhav]

See David given me following code, it works fine for me.

But i just removed all ads now so you will not see any ad on header….

But i can show you below;० how ads look like after wrapping code,

This is how Header section look,

“Here ad show above title”
My site title (myindiasupport)
Meanu-search bar

This is how Header section ad I want,

My site title(myindiasupport)
“Here my ad must be shown”
Menu-search bar

In short i want ad between site title and menu search bar….

So which code i need change for it.

I just added my site link but it doesn’t not show ad in header as i removed it because of some reason.

But you can understood from above easily.

Codes,

* Set min height of ad container */
.header-advert-wrap {
    min-height: 300px;
}
/* Optional - adjust height on mobile */
@media(max-width: 768px) {
    .header-advert-wrap {
        min-height: 200px;
    }  
}

// Your Ad script goes here

[vaibhav]

Or shout i need to made changes in following code.
Wrapping code <div class header advert

`

// Your Ad script goes here

[Elvin]

I’m not seeing the div you’ve mentioned on the site’s page source. –
https://share.getcloudapp.com/kpuDGQYe https://share.getcloudapp.com/DOuq7gA0

To clarify further: Is this where you want the ad to appear? https://share.getcloudapp.com/nOuPyp8N

If so, consider hooking the script on generate_after_header with a priority value of 1.

If this is where you want to insert the ad – https://share.getcloudapp.com/d5uAdYvK – you should hook the script on generate_before_right_sidebar_content.

[vaibhav]

Currently i removed all <Div class and ads. that’s why you cant see it.

https://share.getcloudapp.com/nOuPyp8N.

This above screenshot shows correct position. Generate-after-header is exact position that i want.

Where i need to add this code? or which code i need to change wrapping code Script or Following CSS code?

Check the first script that david given and tell me where i need to change.`

`* Set min height of ad container */
.header-advert-wrap {
min-height: 300px;
}
/* Optional – adjust height on mobile */

@media(max-width: 768px) {
.header-advert-wrap {
min-height: 200px;
}
}

[Elvin]

This above screenshot shows correct position. Generate-after-header is exact position that i want.

Where i need to add this code? or which code i need to change wrapping code Script or Following CSS code?

In that case, place the

and contained script on a Hook Element and set the Hook Element’s hook to “generate_after_header” but make sure the priority value is 1.

Check the first script that david given and tell me where i need to change.`

`* Set min height of ad container */
.header-advert-wrap {
min-height: 300px;
}
/* Optional – adjust height on mobile */

@media(max-width: 768px) {
.header-advert-wrap {
min-height: 200px;
}
}

That one isn’t a script. It’s a CSS. You can place that on Appearance > Customize > Additional CSS.

[Author]

Posts