Sticky Ad At The Botton Of The Page

Hi there,

you can add your Advert code to a Hook Element:

https://docs.generatepress.com/article/hooks-element-overview/

Wrap you code inside a <div> element with the grid-container class to keep it aligned with the page container ie.

<div class="grid-container custom-ad-container">
<!-- Your ad placement code goes here -->
</div>

Select the generate_after_footer hook
And set the Display Rules to the entire site.

Then add this CSS to your site fix the advert to the bottom of viewport:

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 0;
}
body {
    margin-bottom: 200px; /* Adjust this value to the height of your advert */
}

Hello

I followed the instructions given.

I added an adsense unit which has a width of 728 and a height of 90 so I don't expect the ad to be displayed from side to side.

Is there a way I can center the ad using custom css?

This is how the ad looks https://prnt.sc/x9krby

Thanks

Hi Jose,

Is there a way I can center the ad using custom css?

It should be possible. But we'll have to check the site to see what CSS selectors the ads use.

Can you link us to the site in question?

If you prefer to keep it private, can you open a new topic? So you can use the private information text field to provide your site url. Thank you.

Hello

Thanks for the quick answer

This is my site, https://englishpost.org/

Please check the homepage only (I am using CF full page caching so the rest of the site is not showing the most updated version of it)

https://prnt.sc/x9neir

Thank U

This CSS should horizontally center the ad placement.

.custom-ad-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: fit-content;
}

As for the bottom gap: if you want it removed, add this CSS:

.custom-ad-container ins.adsbygoogle {
    display: block !important;
}

Hello

I am very happy with the result

Thanks for your support.

My Last noob question

I was checking other forum posts and I got the impression that I can hide an element on Mobile, Tablet or Desktop using hide-on-classes

https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

Can I stop that bottom sticky ad from displaying on mobile and tablet?

If so, How do I do that? Like this?

Thank U

GP has these classes built in:

hide-on-desktop
hide-on-mobile
hide-on-tablet

Can I stop that bottom sticky ad from displaying on mobile and tablet?

If you can add in CSS classes, you can add hide-on-mobile if you want it hidden on mobile, and hide-on-tablet if you want it hidden on tablet.

Else, you'll have to write your own @media query for the elements you want to hide on different viewports.