Aligning Ads using Hook Element

Hi Manoj,

Any chance you can link us to your site where we can see the issue?
You can use the private info field for this.

Hi

Sure, I have attached the link. You can see Ads before and after content are aligned to left. Same case for Mobile also.

One more issue is there, I have using fixed size Ad (336 x 280) which is displaying correctly on desktop. But in Mobile it is displaying as responsive.

Thank You

Try this CSS:

.single-post .inside-article ins.adsbygoogle {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.single-post .inside-article {
    display: flex;
    flex-direction: column;
}

But in Mobile it is displaying as responsive.

What does this mean? Do you mean it's not responsive on mobile?

Hi Ying,

Thanks for the solution. It's working well. But I want to align Ads on center for entire site. It is working on single post only.

I have chosen 336 x 280 fixed Ad size on single page (before and after content). But is is displaying much larger than the size specified.

Thank You.

It is working on single post only.

You just need to remove .single-post from the code :)

I have chosen 336 x 280 fixed Ad size on single page (before and after content). But is is displaying much larger than the size specified.

Can you link me to the page?

Hi,

I have removed .single post from CSS code but Ad on home page after header is still aligned to left. Kindly provide me a CSS code for the same.

Also I am using 320 x 50 ad code on home page just after header. It is correctly displaying on desktop. But in case of mobile it is displaying as a big square. It should display with 320 width and 50 height. Same issue is with Ads in single post where I am using 336 x 280 ad unit. How can I fixed this issue?

Please check the link for both the issues.

Hi there,

how was the home page advert added tom the site ?

Hi,

I am using Hook element to show AdSense on front page and Single post.
Setting> Hook > generate_after_header
Display Rules > Location > Front page

Please help me in achieving:
1. Ads in center
2. Fixed Ad size
3. Hide different Ad on desktop and Mobile

Thank You

In the hook wrap your script in the following HTML:

<div class="grid-container ad-over-content">

your script here

</div>

Hi David,

Still ad is aligned to left, this time inside the container. Is it possible to align ads at center for entire site (front page, single post) with one code? Can you please provide me some code so that I can achieve all this 3:

1. Ads in center
2. Fixed Ad size
3. Hide different Ad on desktop and Mobile

Thank You

1. Edit all of the elements that contain ads to David's format:https://generatepress.com/forums/topic/aligning-ads-using-hook-element/#post-2495547

2. For ads that you want it to hide on mobile, add another CSS class to the <div>, so the element would be:

<div class="grid-container ad-over-content hide-on-mobile">

your script here

</div>

For ads that you want it to hide on the desktop, replace the hide-on-mobile class with hide-on-desktop.
For more info about GP's responsive display, check this article: https://docs.generatepress.com/article/responsive-display/

3. Add this CSS:

.grid-container.ad-over-content {
    text-align: center;
}

Hi,

How can I show "advertisement" text above Google Ad?

Thank You

You just need to add one more line:

<div class="grid-container ad-over-content hide-on-mobile">
<p>advertisement</p>
your script here

</div>